在事件监听器中播放音频仍然出错答案

【问题标题】：playing audio in event listener still gives error在事件监听器中播放音频仍然出错
【发布时间】：2019-05-18 10:11:04
【问题描述】：

我在窗口中有这个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.

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

【问题讨论】：

标签： javascript android google-chrome audio

【解决方案1】：

我在制作网络钢琴时遇到了同样的问题。浏览器在加载时为钢琴充电，因此您可以在单击某些内容之前按下（实际触摸屏幕）钢琴键。我所做的是添加一个带有按钮的开始屏幕来开始游戏，这解决了这个问题，因为你必须在触摸钢琴键之前点击一些东西。

【讨论】：

【解决方案2】：

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

解决方案：将其替换为click。

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

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

然而- 因为它需要等待一个完整的“点击”事件（而不是一个“触摸启动”事件），任何应该在“触摸启动”上触发的音频都将被传递结束（第一次它会被触发）。似乎 1. 没有办法解决这个问题以按照我的意愿使用它，以及 2. 如果您无论如何都能听整个文档进行“点击”，那么它实际上并没有做任何事情。不需要的音频。

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

【讨论】：