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

【问题标题】：How to autoplay in IE using <audio> tag如何在 IE 中使用 <audio> 标签自动播放
【发布时间】：2020-03-26 16:38:34
【问题描述】：

我正在尝试自动播放 <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();
        }
    });
});

【问题讨论】：

$('#effectTada').get(0).play()在元数据加载后设置自动播放可能不会触发第一次播放。
@Kaiido 这是怎么回事？这太疯狂了。您可以在下面添加您的答案和解释，以便我给您打勾:)

标签： javascript html internet-explorer

【解决方案1】：

设置autoplay 属性不应在MediaElement 上调用the load algorithm。因此，如果媒体网络状态已设置为HAVE_ENOUGH_DATA，则检查自动播放标志是否设置为 true 的步骤将已执行，此时设置此属性不应执行任何操作。

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

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

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

});

【讨论】：

嗯，为什么这不适用于 $.ajax()？有什么想法吗？
你的意思是在$.ajax()的回调中？那是因为您的代码需要经过用户手势授权才能调用此播放方法，即您需要在点击事件中。但是，您应该能够在这样的点击事件中将您的元素标记为已授权，直接将其暂停，然后您将能够更改它的 src 并再次调用它的播放。
是的。在这部分：success: function(data){}。可以举个例子吗？
这是之前关于此问题的 Q/A stackoverflow.com/questions/58002958/… 还有这个：stackoverflow.com/questions/46483001/…
是的，但是在执行 ajax 操作时，您的点击事件已经失效。就像onclick = (evt) => setTimeout( doSomethingThatShouldBeTrusted, 10000 )。 10 秒过去后，很难说它真的是由用户手势触发的。所以浏览器确实有一些时间限制（大约 500 毫秒），在此之后他们认为点击事件是不安全的。