CODEWITHSUNDEEP
javascriptaudio
Ambient Soda
Ambient Soda

Reputation: 21

Keep getting error - when trying to play audio - why?

I keep getting this message when trying to play audio on my chrome book using Js below:

"DOMException: play() failed because the user didn't interact with the document first."

<script>  
      window.addEventListener('load', (event) => {  
        console.log('page is fully loaded');  
         
        console.log('playing music');  
          
        var audioElement = new Audio('indie.mp3').play();  
  
        if (audioElement !== undefined) {  
          audioElement.then(_ => {  
            // Autoplay started!  
          }).catch(error => {  
            // Autoplay was prevented.  
            // Show a "Play" button so that user can start playback.  
            console.log(error);  
          });  
        }  
  
         
      });  
</script>

Upvotes: 2

Views: 978

Answers (1)

Scott Stensland
Scott Stensland

Reputation: 28285

number one rule when doing web development is to show your browser console ... once you do I see the following console error when I run your code (you will see an error with wording similar I am on firefox other browser show different wording)

DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

in English that means the web page attempts to play audio immediately upon loading without end user permission ... there was an industry back lash a few years ago against webpages which auto played audio so all browsers agreed to block code which auto plays audio ... below works and will play audio once you click the button

<!DOCTYPE html>
<html>

    <!-- https://www.w3schools.com/jsref/met_audio_play.asp -->
    <!-- https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play -->
    <!-- http://www.html5rocks.com/en/tutorials/webaudio/intro/ -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    </head>
    <body>
        <audio id="myAudio">
            <!-- <source src="horse.mp3" type="audio/mpeg" /> -->
            <!-- above also works if mp3 file is local to same dir as this html file  -->
            <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">

            Your browser does not support the audio element.
        </audio>

        <button onclick="playAudio()" type="button">Play Audio</button>
        <button onclick="pauseAudio()" type="button">Pause Audio</button>

        <script>
            var x = document.getElementById("myAudio");

            function playAudio() {
                x.play();
            }

            function pauseAudio() {
                x.pause();
            }
        </script>
    </body>
</html>

above code is taken from the link embedded as a comment ... webdev is a fluid body of work so its important to drive learning from current tutorials which match today's reality ... enjoy and welcome to audio processing

Upvotes: 2

Related Questions