HTML5 音频无法通过 Javascript 播放，除非手动触发一次。

Question

我正在尝试使用 <audio> 标签和 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之前的某个时刻启动它，否则不会播放音频。这是有意为之吗？有没有什么解决方法？

- Jonah H.

Answer 1

对于我的需求，我是这样做的:

幸运的是，在用户触发启动音频行为之前，他们必须点击一个按钮。我将 元素的音量设置为0.0，并在他们点击该按钮时进行“播放”。

播放声音时，我只需将音量属性设置回1.0，它就可以正常播放而无需用户干预。

- Jonah H.

---

在Chrome 58.0.3029.83中对我有效。注意：您必须等待第一次播放完成后才能重新启动它。 - raacer

在我的移动浏览器上工作。谢谢！ - mestarted

Answer 2

在我的情况下，这是一个简单的解决方案：
https://dev59.com/GGUp5IYBdhLWcg3w-Lez#28011906
复制并粘贴到您的Chrome中：

chrome://flags/#autoplay-policy

我的 Web 应用程序有很多页面重新加载，所以我不能强迫用户每次都按按钮；但它是供内部使用的，因此我可以强制用户使用 Chrome 并配置该选项。

- FRa

---

注意：此选项已更名为自动播放策略。 - Arnaud

这对我来说解决了问题，那其他访问我网站的人呢？ - Munim Munna

在iPad上不存在 - AndiDev

对于较新版本的Chrome，我需要执行以下操作：设置 -> 隐私和安全 ->（其他内容设置）声音=> 添加站点/文件到允许列表如果您需要在本地运行某些内容，则此方法非常有用。但请注意，这些解决方案并不适用于您网站的访问者。 - Chad Cache

Answer 3

我知道在移动版的Safari浏览器中，任何对play()方法的JavaScript调用都必须与用户发起的点击事件处于同一调用堆栈。使用JavaScript触发模拟点击也不起作用。

在我的Nexus 7上，我可以证实，除非JavaScript是由用户点击触发的，否则它不会播放。

- Rob Lynch

---

在移动版Safari中，您可以通过让用户点击一个按钮并播放短暂的静音声音来欺骗Safari。不需要任何音量技巧或其他东西，这似乎就是解决方法。不确定这是否适用于Android。 - toon81

Answer 4

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

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

- Eli Mashiah

---

myAudio.play() 返回一个 Promise！ 这段代码会导致异常：请使用 then 方法。例如： myAudio.play().then(() => {myAudio.pause()}) - maracuja-juice

我尝试了这个解决方案，但在Chrome中仍然出现了一个关于用户未先交互的Promise错误。浏览器已经更新了，所以现在这个方法行不通了吗？还是我漏掉了什么@maracuja-juice？变量：var trigger = document.getElementById("trigger"); var audio = new Audio('media/hello.mp3'); 播放/暂停：trigger.addEventListener("click", function() {audio.play().then(() => {audio.pause()}) }); 鼠标悬停的原始意图：trigger.addEventListener("mouseover", function( event ) { audio.play(); }, false); - user1406440

Answer 5

这是一篇关于在第一次用户交互时加载所有音频文件并以编程方式稍后播放的原因和如何克服它的博客文章：https://blog.foolip.org/2014/02/10/media-playback-restrictions-in-blink/ 采用这种方法，GitHub上有一个小型JavaScript模块可供使用https://github.com/MauriceButler/simple-audio。我自己尝试了这种简单的方法 - 运行顺畅，效果很好！

- makechaos

Answer 6

幸运的是，我正在开发的html5应用只需要在Android 4.1上运行，但如果你想要制作跨平台应用，则需要稍微调整一下。将音量设置为0.0然后重新设置或使用控件的自动播放对我都没有效果。我还尝试了静音，但那也不起作用。然后我想，如果我设置持续时间，并仅播放文件的极小部分会怎样呢?这里是另一个拼凑而成的脚本，它实际上确实有效:

function myAjaxFunction() {
  clearTimeout(rstTimer); //timer that resets the page to defaults
  var snd=document.getElementById('snd');
  snd.currentTime=snd.duration-.01; //set seek position of audio near end
  snd.play(); //play the last bit of the audio file
  snd.load(); //reload file
  document.getElementById('myDisplay').innerHTML=defaultDisplay;
  var AJAX=new XMLHttpRequest(); //won't work in old versions of IE
  sendValue=document.getElementById('myInput').value;
  AJAX.open('GET', encodeURI('action.php?val='+sendValue+'&fn=find'), true);
  AJAX.send();
  AJAX.onreadystatechange=function() {
    if (AJAX.readyState==4 && AJAX.status==200) {
      document.getElementById('myDisplay').innerHTML=AJAX.responseText;
      if (document.getElementById('err')) { //php returns <div id="err"> if fail
        rstTimer = setTimeout('reset()', 5000); //due to error reset page in 5 seconds
        snd.play(); //play error sound
        document.getElementById('myInput').value=''; //clear the input
      }
    }
  }
}

- MaKR

Answer 7

您不需要JavaScript来实现自动播放，我注意到您的代码存在几个问题：

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

我会将其更改为以下形式（在HTML5中，在某些情况下不需要使用attribute="value"语法，这适用于XHTML）：

<audio id="denied" autobuffer controls autoplay>
    <source src="sound/denied.wav" />
</audio>
<a href="#" id="play-button">play!</a>

在iOS中，自动播放被禁用了，您需要点击播放按钮或在JavaScript中为自定义控件添加用户单击事件，如下所示：

var audio = document.getElementById('denied');
var button = document.getElementById('play-button');
button.addEventListener('click',function(){
    audio.play();
});

或者使用jQuery：

$('#play-button').click(function(){ audio.play(); });}

编辑

请注意，HTML5 技术相对较新（至少某些功能如此），因此浏览器的兼容性和功能会不时地发生变化。

我鼓励每个人都要及时了解当前状态，因为有时候事情开始变得不再依赖 hack 或者反过来。

一个好的起点：http://caniuse.com/#feat=audio（查看底部的选项卡）。

此外，针对全局音频解决方案，我建议使用SoundManager2 JS 库。

- aesede

Answer 8

我在我的应用程序中遇到了同样的问题。我的应用程序使用场景如下：

1. 点击按钮以显示包含信息的表格（用户操作）
2. 通过AJAX显示表格并刷新其中的数据
3. 当数据发生更改时播放声音

幸运的是，我有用户操作（步骤1），所以我能够通过它来“启动”声音，然后通过JavaScript播放它，而无需需要用户操作。请参见代码。

HTML

<audio id="kohoutAudio">
    <source src="views/images/kohout.mp3">
</audio>

<button id="btnShow">Show table</button>

Javascript

$("#btnShow").click(function () {
    //some code to show the table
    //initialize the sound
    document.getElementById('kohoutAudio').play();
    document.getElementById('kohoutAudio').pause();
});

function announceChange(){
    document.getElementById('kohoutAudio').play();
};

- Luboš Miřatský

Answer 9

我也遇到过这种情况。以下是我的解决方法：

我将音频设置为 autoplay 并将音量设置为 0。 当我需要播放时，我使用 load() 方法，它会自动播放。 这是一个轻量级的 mp3 文件，每小时/两小时播放一次，所以对我来说很有效。

- Marks