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

【问题标题】：Why audio not playing on mobile browser为什么音频不能在移动浏览器上播放
【发布时间】：2017-09-21 13:55:19
【问题描述】：

我整天都在寻找。我知道自动播放在移动设备上不起作用，这是有道理的。但我想知道为什么这不起作用。有没有办法解决这个问题。下面的代码在桌面上完美运行，但在移动设备上却不行。

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

【问题讨论】：

【解决方案1】：

非常老的问题，但我在解决问题的过程中遇到了几次问题，即音频在桌面上似乎可以正常工作，但在某些移动浏览器上却完全不行。

我的问题是，在 touchevent 中，我正在执行 e.preventDefault()，这（不知何故？）使事件“不受信任”，这意味着一切看起来都很好，但没有音频播放。

我通过不使用触摸事件并依赖在 css 中触发的点击事件并在 css 中设置 touch-action: manipulation 来修复它。不是最好的解决方案，但是嘿。非常愚蠢的是，点击控件以播放声音时，该事件变得不受信任，并具有阻止默认值，这样它就不会在双击时放大。

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：