除非手动触发一次,否则HTML5音频无法通过Javascript播放

Question

我正在尝试使用标签和javascript自动播放一个小的声音文件来启动它.

<audio id="denied" preload="auto" controls="false">
    <source src="sound/denied.wav" />
 </audio>

然后通过javascript,在适当的时候:

$('#denied')[0].play()

适用于我桌面上的Chrome.在Android 4.1.1中,除非在javascript尝试播放之前在HTML5音频控件上点击"播放",否则声音将无法播放.

所以基本上Android浏览器(股票或Dolphin)不播放音频,除非用户在javascript之前的某个时刻启动它.这是有意的吗？有没有办法解决？

Answer 1

就我而言,这是一个简单的解决方案:
https ://stackoverflow.com/a/28011906/4622767
将其复制并粘贴到您的chrome中:

chrome://flags/#autoplay-policy

我的网页应用程序有很多页面重新加载,所以我不能强迫用户每次都按下按钮; 但它是供内部使用的,所以我可以强制用户使用chrome并配置该选项.

Answer 2

那么,就我的目的而言,这就是我所做的:

幸运的是,在用户可以触发启动音频的行为之前,他们必须单击一个按钮.我将元素的音量设置为0.0,并在单击此按钮时使其"播放".

在静音播放声音之后,我只需将音量属性设置回1.0,即可在没有用户干预的情况下播放.

Answer 3

我知道在移动safari中,任何对play()的javascript调用必须与用户初始化click事件在同一个调用堆栈中 .使用javascript触发器欺骗点击也不起作用.

在我的nexus 7上,我可以确认,除非用户点击触发了javascript,否则它无法播放.

Answer 4

主要问题是声音（在iOS和Android上）必须由用户点击触发。我的解决方法非常简单。将其绑定audio.play()到click事件监听器，然后立即将其暂停。从那时起，声音就完美了。

var myAudio = new Audio('assets/myAudio.mp3');
...
button.addEventListener("click", function() {
    myAudio.play();
    myAudio.pause();
    ...
});