React error when using audio.play() function

17,757

Solution 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

Solution 2

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()

Solution 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.

Share:
17,757

Related videos on Youtube

Kacper Biedka
Author by

Kacper Biedka

00' developer based in Poznań, Poland. I love bringing creative ideas to life with a touch of magic ✨

Updated on September 16, 2022

Comments

  • Kacper Biedka
    Kacper Biedka over 1 year

    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;
    
    
    • Kacper Biedka
      Kacper Biedka almost 5 years
      I don't think the rest of my code have any impact on this function because I deliberately created a new component to test if it may be the fault of my code. I think that reinstalling React seems reasonable, thanks for your answer :)
    • Gabriele Petrioli
      Gabriele Petrioli almost 5 years
      Open your browsers network tab and see if the request for the mp3 file is pointing at the correct url.
  • Jason
    Jason almost 4 years
    While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation
  • anztrax
    anztrax almost 3 years
    thanks bro.. it works smooth like a butter :ok: