chrome window.load〜.play（）

Question

window.onload = function() {
    document.getElementById("up").play();
    alert("k");
}

<audio id="up" src="./res/up.mp3" loop="loop"></audio>

嗨，我刚刚开始研究html＆js，上面的代码在IE上可以正常工作，但只有警告发生在chrome上。这正常吗？

Answer 1

这是因为chrome抛出异常：

  

DOMException：元素没有受支持的源。

  "code": 9,
  "name": "NotSupportedError",
  "message": "The element has no supported sources."

Chrome已更改其政策，因为blocking roughly half of unwanted media autoplays

阅读：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

参考：

  

在M66中推出的自动播放策略稳定的音频和视频   元素，并有效地阻止了大约一半的不需要的媒体   在Chrome中自动播放。对于网络音频API，自动播放策略将   在M70中发射。这会影响网页游戏，某些WebRTC应用程序以及   其他使用音频功能的网页。开发人员将需要更新   他们的代码以利用该政策。可以找到更多详细信息   在下面的Web Audio API部分中。

Chrome's autoplay policies are simple:

• 始终允许静音的自动播放。
• 在以下情况下，允许自动播放声音：
  • 用户已与域互动（单击，点击等）。
  • 在台式机上，已超过用户的“媒体参与度索引”阈值， 表示用户以前曾播放带声音的视频。
  • 在移动设备上，用户已将该网站添加到他或她的主屏幕中。
• 顶框  可以将自动播放权限委派给其iframe以允许与  声音。

我已编辑您的代码以显示错误

window.onload = function() {
    const playPromise = document.getElementById("up").play();
    // In browsers that don’t yet support this functionality,
    // playPromise won’t be defined.
    if (playPromise !== undefined) {
    playPromise.then(function() {
      // Automatic playback started!
    }).catch(function(error) {
        console.log(error);
       // Automatic playback failed.
       // Show a UI element to let the user manually start playback.
  });
}
    alert("k");
    
}

<audio id="up" src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Queen/Queen%20'Back%20Chat'.mp3" loop="loop"></audio>

Answer 2

这是Chrome's autoplay policy的结果，它限制了网站在用户与页面进行交互之前播放音频。

Answer 3

总而言之，自2018年4月起，默认情况下默认情况下不允许使用Chrome中的自动播放。这可以保护用户免受不良声音的影响。 More info。

但是，如果用户与页面互动（例如通过单击），则可以，因此可以将onload代码更改为单击。像这样：

window.addEventListener("click", function(event) {
    document.getElementById("up").play();
    alert("k");
});

单击该页面，然后单击Walla。

希望有帮助。