为什么音频不能在移动浏览器上播放

Question

我一整天都在搜索。我知道自动播放不适用于移动设备，这是有道理的。但我想知道为什么这不起作用。有没有解决这个问题。以下代码适用于桌面，但不适用于移动设备。

var audio = new Audio('sound.mp3');
audio.play();

Answer 1

这个问题很老，但是在解决问题的过程中我遇到了几次，那就是音频在台式机上似乎工作得很好，但在某些移动浏览器上根本无法正常工作。

我的问题是我在touchevent中正在做e.preventDefault()，这（以某种方式？）使事件“不可信”，这意味着一切看起来都很好，但没有音频播放。

我通过不使用touch事件并依靠在CSS中设置touch-action: manipulation之后触发的click事件来修复它。不是最好的解决方案，但是嘿。在控件上轻按一下该事件就变得不可信任，以防止默认值播放声音，这样就不会在双击时放大该事件。

希望这可以帮助遇到类似问题的人。

（摘自Manuel Graf对this问题的评论）

Answer 2

正如其他人所提到的，移动设备上 JS html5 音频的一个常见问题是实例化 Audio 对象的范围需要响应用户操作。

也许这是在 onReady 函数处理程序中，您可以处理某种初始化 Audio 对象的点击或触摸操作。

var audio;
$("#startAudio").on("click", function(e){
    if(!audio){
        audio = new Audio('sound.mp3');;
    }
});

这将下载音频文件，但不应自动播放。 初始化后，您的代码可以根据需要播放音频 audio.play();