如何使用 <audio> 标签在 IE 中自动播放

Question

我正在尝试自动播放 <audio> 元素，但仍然无法在 IE 中使用，但在其他浏览器中可以使用。请在下面查看我的代码：

<!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>

注意：我知道 wav 和 ogg 在这里不起作用，但我有这两个的工作。我也尝试了很多关于这个主题的研究。

更新:

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

    $.ajax({
        url: urls,
        type: 'GET',
        success: function(data){
            $("#effectTada")
                .attr('autoplay', true)
                .get(0).play();
        }
    });
});

Answer 1

设置 autoplay 属性不应调用 the load algorithm on the MediaElement. So if for the media network state is already set to HAVE_ENOUGH_DATA，检查自动播放标志是否设置为 true 的步骤已经执行，此时设置此属性不应执行任何操作。

换句话说，如果设置太晚，仅设置此属性应该不会使媒体播放。您需要再次触发 load 算法，或者只需调用 MediaElement 的 play() 方法：

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

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

});

如何使用 <audio> 标签在 IE 中自动播放

How to autoplay in IE using <audio> tag

html

javascript

internet-explorer