移动浏览器需要用户操作才能开始播放音频元素。 click 事件满足要求，但 touchstart 似乎不是 Android 或 iOS 版 Chrome 中可接受的启动事件。 (见下文)
有谁知道在哪里可以找到开始游戏所需的事件上下文的精确定义。
(我试图使用 How to prevent doubletap zoom in iOS and Android 中的想法解决 UX 问题。自从发布我的原始问题后，我找到了无需使用 touchstart 即可解决 UX 问题的解决方案，但我认为关于哪些事件被认为是用户操作的基本问题仍然有效。)
附录:
有人建议我弄错了 touchstart 事件，因此为了记录在案，我提供了一个简单的测试程序。由于它需要真实的音乐文件和移动设备，因此 JSFiddle 不是合适的平台(除非有人知道如何在 fiddle 中模拟 touchstart 事件)。要重现我的观察结果，请编辑 javascript 以加载您自己的音频文件。
<!DOCTYPE html>
<html>
<body>
<br>
<button type="button" id="but1">click</button>
<button type="button" id="but2">touch</button>
<br>
<br>
<span id="message"></span>
<script>
var e;
e = document.getElementById('but1');
e.onclick = click;
e = document.getElementById('but2');
e.ontouchstart = touchstart;
function click() {
alert('caught click');
play();
event.preventDefault();
}
function touchstart() {
alert('caught touchstart');
play();
event.preventDefault();
}
var p;
var t;
function play() {
p = new Audio();
p.src = '/k487.mp3'; // CHANGE THIS
p.preload = 'auto';
p.play();
t = setInterval(report,1000);
}
function report() {
var s = 'Player readyState='+p.readyState+', currentTime='+p.currentTime;
var e = document.getElementById('message');
e.innerHTML = s;
}
</script>
</body>
</html>
当我在 Android 6.0.1 上的 Chrome 58 中加载此页面时，点击按钮按预期工作，生成弹出窗口，播放一些音乐并更新播放时间。
如果我重新加载页面并改为触摸“触摸”按钮，我会看到弹出窗口，但没有音乐播放。状态显示显示 readyState 为 4，currentTime 为 0。换句话说，允许 touchstart 事件加载音频但不允许启动播放。
因为我找不到关于什么事件应该起作用的文档，所以我不知道是否将此视为 Chrome 错误或预期行为。
最佳答案
当调用媒体元素上的 play() 方法时，用户代理必须运行以下步骤 https://html.spec.whatwg.org/multipage/media.html#dom-media-play
step1: if the media element is not allowed to play...
然后我想知道允许播放的条件，它跳转到这里https://html.spec.whatwg.org/multipage/media.html#allowed-to-play
它说:
For example, a user agent could require that playback is triggered by user activation, but an exception could be made to allow playback while mute
然后来到'triggered-by-user-activation' here 我认为这是原因:
An algorithm is triggered by user activation if any of the following conditions is true:
The task in which the algorithm is running is currently processing an activation behavior whose click event's isTrusted attribute is true.
- change
- click
- contextmenu
- dblclick
- mouseup
- pointerup
- reset
- submit
- touchend
那里没有提到“touchstart”。
希望对你有帮助。
关于javascript - 在移动 Chrome 中启动 HTML5 音频播放可以接受哪些事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44595093/