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
复制＆amp;将其粘贴到您的Chrome中：

chrome://flags/#disable-gesture-requirement-for-media-playback

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

Answer 2

嗯，就我的目的而言，这就是我的所作所为：

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

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

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

幸运的是，我正在研究的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 6

您不需要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 7

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

我自己尝试了这种简单的方法 - 无缝地工作＆amp;太棒了！

Answer 8

它也发生在我身上。这是我如何破解这个：

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

Answer 9

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

单击按钮以显示包含信息的表（用户操作）
通过AJAX显示表格并刷新数据
数据更改后播放声音

幸运的是我有用户操作（步骤1），所以我能够启动＆＃34;它的声音，然后通过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();
};

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

9 个答案:

修改