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() failed because the user didn't interact with the document first.

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

Answer 1

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

解决方案：与click交换。

我仍然感到沮丧的一件事：

我正在使用此特定代码段作为一种非常快速地允许在页面上播放音频的方法，以便底层html5游戏可以播放音频而不必担心它会被浏览器阻止。

但是-因为它需要等待完整的“点击”事件（而不是“ touchstart”事件），所以将在“ touchstart”上触发应触发的任何音频结束（否则将首次触发）。似乎1.没有办法解决这个问题，按照我的意愿来使用它，并且2.如果您仍然能够在整个文档中听到“点击”，实际上并没有停止任何操作不需要的音频。

如果有人能提出更好的解决方案，我将换成“正确答案”。

Answer 2

制作网络钢琴时，我遇到了同样的问题。浏览器会在加载时向钢琴收取费用，因此您可以在单击某些按钮之前按（实际触摸屏幕）钢琴键。我要做的是添加一个带有按钮的开始屏幕以开始游戏，这解决了它，因为在触摸钢琴键之前必须先单击某些内容。

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

2 个答案: