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

使用import audio from '../assets/audio.mp3'//your map3 path there然后创建一个对象let audio = new Audio(audio)并在所需的函数audio.play()播放声音

Answer 3

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 4

For me I started getting this really vague error when the audio files had been renamed.

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

Please check that your audio files are matching the path and name in your code before you try different methods to play them.

Answer 5

Import your audio file like this

import audio from './filepath'

just replace filepath with your audio file's location Then create an audio and add its source in this way

const audioElement = new Audio()
audioElement.src = audio

The just play the audio

audioElement.play()