CODEWITHSUNDEEP
javascriptangularjsgoogle-chromehtml5-audio
user3137592
user3137592

Reputation: 101

audio.play() html tag doesn't play in chrome

I am facing an issue while playing audio in chrome when audio.src is not called preceeding to play call. However, firefox plays it alright. Can someone pls suggest? Below is the fiddle link -

http://jsfiddle.net/vn215r2d/1/

One can also find the code over here -

<html>
   <head>
      <script language="javascript">      
          var audioo = document.createElement("audio");

          function newCall() {        
              audioo.src = "";
              audioo.src = "http://xx.xx.xx.xx:8181/api/captcha/sound";
              audioo.play();               
          } 

          function playAgain() {               
               audioo.play(); // doesn't work in chrome :(
          } 

      </script>
   </head>
   <body>
   <button type="button" onClick="newCall()">New Captcha Call</button>
   <br>
   <button type="button" onClick="playAgain()">Replay Captcha</button>   
</body>
</html>

Upvotes: 1

Views: 6246

Answers (1)

somethinghere
somethinghere

Reputation: 17340

Update

Oh waw, apparently is comes down to the audio.currentTime not being writeable until you rewrite the src. Heres what you can do and it does work: 

function newCall() {  
    audioo.src = "http://xx.xx.xx.xx:8181/api/captcha/sound";
    // make all audio attributes writeable again by resetting the src
    audioo.src = audio.src;             
}

The answer took a bit of googling, but I got it from here: https://stackoverflow.com/a/14850353

Original

I tested on Chrome with resetting the audio position and it worked. Its safest to pause first, but it works either way.

var audioo = document.createElement("audio");

// Lets add an event listener to play when we are ready to start playing
audioo.addEventListener("canplaythrough", function(){
    audioo.play(); 
}, false); 

function newCall() {        
     audioo.src = "";
     audioo.src = "http://xx.xx.xx.xx:8181/api/captcha/sound";             
} 

function playAgain() { 
     // Let's check if we are ready enough to play
     if(audioo.readyState === 4){                       
         audioo.pause(); // first pause        
         audioo.currentTime = 0; // then reset           
         audioo.play(); // then play
     } else {
         // else inform us that we are not ready to play yet.
         alert("Audio not ready yet.");
     }
}

Here are two fun resources that can help:

Upvotes: 1

Related Questions