除非手动触发一次，否则 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浏览器（股票或海豚）不会播放音频，除非用户在javascript之前的某个时间点启动它。 这是故意的吗？ 有没有办法解决？

Answer 1

好吧，出于我的目的，这就是我所做的：

幸运的是，在用户触发开始音频的行为之前，他们必须单击一个按钮。 我将元素的音量设置为 0.0，并在他们单击此按钮时让它“播放”。

静音播放后，我只需将音量属性设置回 1.0，无需用户干预即可播放。

Answer 2

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

chrome://flags/#autoplay-policy

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

Answer 3

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

在我的 nexus 7 上，我可以确认除非 javascript 是由用户点击触发的，否则它不会播放。

Answer 4

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

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

Answer 5

这是一篇关于原因以及如何通过在第一次用户交互时加载所有音频文件并稍后以编程方式播放它们来克服它的博客文章： https ://blog.foolip.org/2014/02/10/media- play-restrictions-in-blink/采用这种方法，GitHub 上有一个小的 javascript 模块https://github.com/MauriceButler/simple-audio

我自己尝试了这种简单的方法 - 无缝且很棒！

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
      }
    }
  }
}

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 是相当新的技术（至少是一些功能），因此浏览器兼容性和功能每隔一段时间就会发生变化。

我鼓励每个人随时了解当前状态，因为有时事情开始不那么依赖黑客了，或者相反。

一个好的起点： http ://caniuse.com/#feat=audio（检查底部的标签）。

对于全局音频解决方案，我建议使用SoundManager2 JS 库

Answer 8

它也发生在我身上。 这是我破解的方法：

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

Answer 9

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

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();
};