React error when using audio.play() function

Question

I'm trying to play a sound by triggering the function with onClick event in React and I'm getting the following error:

Uncaught Error: The error you provided does not contain a stack trace.

at B (index.js:1582)

at G (index.js:1899)

at eval (index.js:1914)

at eval (index.js:1933)

at eval (index.js:1414)

import React from "react";
import firebase from "../../firebase";
import classes from "./Sidenav.module.sass";

const Sidenav = props => {
  const logout = () => {
    firebase.auth().signOut();
    window.location.href = "..";
  };

  const playAudio = () => {
    let audio = new Audio("../../assets/bellNotification.mp3");
    audio.play();
  };

  return (
    <div style={props.styles.sideNavDiv} className={classes.sidenavDiv}>
      <i />
      <div style={props.styles.iconDiv} className={classes.iconDiv}>
        <i className={"material-icons " + classes.navIcon}>account_box</i>
        <p className={classes.iconText}>Account</p>
      </div>
      <div style={props.styles.iconDiv} className={classes.iconDiv}>
        <i className={"material-icons " + classes.navIcon}>settings</i>
        <p className={classes.iconText}>Settings</p>
      </div>
      <div style={props.styles.iconDiv} className={classes.iconDiv}>
        <i className={"material-icons " + classes.navIcon}>trending_up</i>
        <p className={classes.iconText}>Check Progress</p>
      </div>
      <div style={props.styles.iconDiv} className={classes.iconDiv}>
        <i className={"material-icons " + classes.navIcon}>looks_one</i>
        <p className={classes.iconText}>1RM calculator</p>
      </div>
      <div
        onClick={props.toggleModal}
        style={props.styles.iconDiv}
        className={classes.iconDiv}
      >
        <i className={"material-icons " + classes.navIcon}>alarm</i>
        <p className={classes.iconText}>Edit timers</p>
      </div>
      <div
        onClick={playAudio}
        style={props.styles.iconDiv}
        className={classes.iconDiv}
      >
        <i className={"material-icons " + classes.navIcon}>help</i>
        <p className={classes.iconText}>Help</p>
      </div>
      <div
        onClick={logout}
        style={props.styles.iconDiv}
        className={classes.iconDiv}
      >
        <i className={"material-icons " + classes.navIcon}>
          power_settings_new
        </i>
        <p className={classes.iconText}>Logout</p>
      </div>
    </div>
  );
};

export default Sidenav;

Answer 1

The same thing happened to me also because of the chrome changes in player promise. just replace your player.play() with

const playPromise = player.play();

      if (playPromise !== undefined) {
        playPromise
          .then(_ => {
            // Automatic playback started!
            // Show playing UI.
            console.log("audio played auto");
          })
          .catch(error => {
            // Auto-play was prevented
            // Show paused UI.
            console.log("playback prevented");
          });
      }

You can read more about it here on chrome blogs about player promise changes

Answer 2

Okay, I managed to fix my problem. This error is caused because the new Audio(url).play() points to the index.html in the public folder and for some reason it doesn't seem to work in the root div in my case. I created the audio element in the index.html file and moved the mp3 file to the public folder. <audio id="audio"><source src="bellNotification.mp3" type="audio/mpeg"></source></audio>

I changed the function like this

const playAudio = () => { document.getElementById("audio").play(); };

It works for me but I hope that someone can fix this problem with pure js without accessing the html file.

Answer 3

use import audio from '../assets/audio.mp3'//your map3 path there then create an object let audio = new Audio(audio) and play the sound in the desired function audio.play()