Javascript - HTML5 音频无法在 Android 设备上播放答案

【问题标题】：Javascript - HTML5 audio does not play on Android deviceJavascript - HTML5 音频无法在 Android 设备上播放
【发布时间】：2016-07-18 17:10:41
【问题描述】：

我有一个脚本，在倒计时后应该播放一个 .ogg 文件。考虑到文件的大小，倒计时结束后应该播放的文件大约是 16kb。现在脚本看起来很好并且在桌面浏览器上运行良好，但它不会在我的 Android 设备上播放 16kb 的 ogg 文件。我无法弄清楚可能是什么问题。还有另一个 ogg 文件可以播放 onClick 并且它在 Android 浏览器上播放没有任何问题，所以我认为文件格式不是这种情况。请检查代码。

var clickTimer;

$("#startClock").click( function(){
  var pose = document.getElementById("pose");
     if (clickTimer) {
        clearInterval(clickTimer);
     }
     var counter = document.getElementById('minutes').value;
     clickTimer = setInterval(function() {
     counter--;
      if (counter >= 0) {
         span = document.getElementById("count");
         span.innerHTML = counter;
      }
      if (counter === 0) {
        span = document.getElementById("count");
        pose.play();
               }
     },  1000);


});

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>

<audio id="pose" src="https://dl.dropboxusercontent.com/u/38489556/changepose.ogg" ></audio>

<div id="count">0</div>

<div id="min">Mins</div>
  <select id="minutes">
  <option value="6" selected="selected">1</option>
  </select>
 <button id=startClock >Start</button>

【问题讨论】：

播放媒体需要是用户操作的结果，例如 click()
这是特定于 Android 设备的吗？因为它在桌面上运行良好，主要目的是让用户知道计时器到了，这需要自动发生。
是的，这是移动设备上的新政策，可能是为了节省 CPU/电池寿命。一旦用户播放音频标签，例如使用controls，您就可以再次播放（）标签而无需干预。
是否有任何解决方法，因为我希望它在倒计时归零时自动播放声音？
将控件添加到标签，以不透明度 0 隐藏，使标签静音，进行相同的单击以启动计时器 play() 静音标签，取消静音标签，设置 .currentTime=0，play()计时器结束时的标签。

标签： javascript android html audio

【解决方案1】：

我已经找到了解决方案。如果有人遇到类似问题，以下是更改后的代码。

var clickTimer;

$("#startClock").click( function(){
  var pose = 
           document.getElementById("pose").play(); 
           document.getElementById("pose").pause(); 
     if (clickTimer) {
        clearInterval(clickTimer);
     }
     var counter = document.getElementById('minutes').value;
     clickTimer = setInterval(function() {
     counter--;
      if (counter >= 0) {
         span = document.getElementById("count");
         span.innerHTML = counter;
      }
      if (counter === 0) {
        span = document.getElementById("count");
        document.getElementById("pose").play(); 
               }
     },  1000);


});

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>

<audio id="pose" src="https://dl.dropboxusercontent.com/u/38489556/changepose.ogg" ></audio>

<div id="count">0</div>

<div id="min">Mins</div>
  <select id="minutes">
  <option value="6" selected="selected">1</option>
  </select>
 <button id=startClock >Start</button>

感谢您的宝贵时间！

【讨论】：

说明修复是什么而不是代码会很有帮助。