HTML5 音频在 IE 中播放，但不在 Chrome 中答案

【问题标题】：HTML5 Audio Plays in IE but not ChromeHTML5 音频在 IE 中播放，但不在 Chrome 中
【发布时间】：2018-05-10 20:51:14
【问题描述】：

我已将音频添加到网页中，以便在加载后播放，这在 Internet Explorer 中运行良好，但在 Google Chrome 中却不行。

<audio autoplay>
   <source src="gears_01.ogg" type="audio/ogg">
   <source src="gears.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>

然后我添加了以下 Javascript 并为音频元素指定了 ID audioId。这再次在 IE 中完美运行，但在 Chrome 中仍然没有，除非我同时按下 CTRL 和 F5 键几次，然后 chrome 会播放音频文件。

var audio = document.getElementById("audioId");
audio.autoplay = true;
audio.load();

我已经尝试了来自各种论坛等的大量代码片段和建议，但我似乎无法让 chrome 自动播放音频。如果我添加控件就可以了，它只是不会自动播放。

更新：所以我发现如果我从链接加载页面然后音频播放，但如果我只是输入页面的 URL，什么都不会发生。

【问题讨论】：

标签： html audio

【解决方案1】：

我不确定 Chrome 为何能通过自动播放变得有趣。我倾向于不相信它。这并不是您问题的真正答案，而是解决问题的方法。

而不是在音频控件上使用autoplay 属性。在元素上使用canplay 事件。

    var audio = document.getElementById("audioId");
    audio.oncanplay = function(){
        audio.play();
    }
    audio.load();

当canplay 事件被触发时，在音频元素上调用play() 开始播放。您正在创建自己的自动播放。请记住，除非您删除该事件，否则只要音频控件加载新文件并可以播放音频，就会触发该事件。我倾向于使用这种方法来给我更多的灵活性来预播放音频/视频。

【讨论】：