javascript - 在事件监听器中播放音频仍然会出错

Question

我在窗口 load 监听器函数中有这个。

var audio = new Audio();
audio.src = "assets/silence.mp3";
audio.load();
document.getElementById("body").addEventListener(
  'touchstart',
  function(evt){ audio.play(); audio = 0; },
  {capture:false,once:true,passive:true}
);

在 android 上的 chrome 中(打开远程调试)，我触摸屏幕，它(正确地)触发尝试播放音频。但是，它失败了并将其记录到控制台:

(index):65 Uncaught (in promise) DOMException: play() 失败，因为用户没有先与文档交互。

如果不通过用户交互事件监听器，我还应该如何以确保用户启动它的方式触发音频？

Answer 1

啊哈。事实证明，从阻止自动播放的机制的 Angular 来看，touchstart 不算作“用户交互”。

解决方法:用click替换。

有一件事我仍然感到沮丧:

我使用这个特定的 fragment 作为一种非常快速地允许在页面上播放音频的方法，这样底层的 html5 游戏就可以播放音频而不用担心它被浏览器阻止。

但是 - 因为它需要等待完整的“点击”事件(而不是“touchstart”事件)，所以应该在“touchstart”上触发的任何音频都将被传递结束(第一次它会被触发)。似乎 1. 没有办法绕过这个问题来按我喜欢的方式使用它，以及 2. 如果您无论如何都能听到整个文档的“点击”声，那么停止实际上并没有做任何事情不需要的音频。

如果有人能想出更好的解决方案，我会把“正确答案”换成那个。