0

I'm trying to autoplay an <audio> element but still not working in IE, but working in other browsers. Please see my code below:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  
  <audio id="effectTada">
    <source src="https://www.soundeffectsplus.com/uploads/prod_audio/39472249_footsteps-running-on-road-03.mp3" type="audio/mpeg">
    <source src="https://www.soundeffectsplus.com/uploads/prod_audio/39472249_footsteps-running-on-road-03.wav" type="audio/mpeg">
    <source src="https://www.soundeffectsplus.com/uploads/prod_audio/39472249_footsteps-running-on-road-03.ogg" type="audio/ogg">
  </audio>
  
  
  <button type="button" class="play">Play</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  
    $(function(){
      
      $(document).on('click', '.play', function(){
        
        $('#effectTada').attr('autoplay', true);
        
      });
      
    });
    
  </script>
</body>
</html>

Note: I know the wav and ogg is not working here, but I have a working of these 2. I also tried a lot of research about this topic.



Update:

$(document).on('click', '#completed', function(){
    var urls = "some url";

    $.ajax({
        url: urls,
        type: 'GET',
        success: function(data){
            $("#effectTada")
                .attr('autoplay', true)
                .get(0).play();
        }
    });
});
Blues Clues
  • 1,694
  • 3
  • 31
  • 72
  • 1
    `$('#effectTada').get(0).play()` setting the autoplay after the metadata has been loaded may not trigger the first playing. – Kaiido Dec 02 '19 at 04:22
  • @Kaiido How is that happened? That's insane. You can add your answer with explanation below so I can give you the checkmark:) – Blues Clues Dec 02 '19 at 04:26

1 Answers1

2

Setting the autoplay attribute should not call the load algorithm on the MediaElement. So if for the media network state is already set to HAVE_ENOUGH_DATA, the steps to check if the autoplay flag is set to true will already have been executed and setting this attribute should do nothing at that time.

In other words, just setting this attribute should not make the media to play if set too late. You'd need to trigger the load algorithm again, or simply call your MediaElement's play() method:

$(document).on('click', '.play', function(){

  $('#effectTada')
    .attr('autoplay', true)
    .get(0).play();

});
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Uhm, why is this not working with $.ajax()? Any idea? – Blues Clues Dec 02 '19 at 05:04
  • You mean in the callback of `$.ajax()`? That's because your code needs to have been authorized by a user-gesture to call this play method, i.e you need to be inside a click event. However you should be able to mark your element as authorized in such a click event, pause it directly, and then you'll be able to change it src and call its play again. – Kaiido Dec 02 '19 at 05:08
  • Yes. In this part: `success: function(data){}`. Can you give me an example? – Blues Clues Dec 02 '19 at 05:09
  • Here was a previous Q/A about this issue https://stackoverflow.com/questions/58002958/is-there-any-workaround-or-hack-to-make-the-audio-autoplay-on-chrome-firefox/58004573#58004573 Also this one: https://stackoverflow.com/questions/46483001/programmatically-play-video-with-sound-on-safari-and-mobile-chrome/46483345#46483345 – Kaiido Dec 02 '19 at 05:10
  • Yes but at the time the ajax operation is performed, your click event is dead. It's like `onclick = (evt) => setTimeout( doSomethingThatShouldBeTrusted, 10000 )`. After the 10s have elapsed, it's hard to tell it was really triggered by user gesture. So browsers do have some time limit (around 500ms) after which they consider the click event to be unsafe. – Kaiido Dec 02 '19 at 05:17
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/203445/discussion-between-kaiido-and-jonjie). – Kaiido Dec 02 '19 at 05:18