如何使javascript警报播放100％？

Question

<span id="countdown"></span>
<script>
document.getElementById('countdown').innerHTML =
  0 + ":" + 10;
startTimer();

function startTimer() {
  var bell = new Audio('http://soundbible.com/mp3/Store_Door_Chime-Mike_Koenig-570742973.mp3');
  var presentTime = document.getElementById('countdown').innerHTML;
  var timeArray = presentTime.split(/[:]+/);
  var m = timeArray[0];
  var s = checkSecond((timeArray[1] - 1));
  if(s==59){m=m-1}
  if((m==0) && (s==1)){bell.play();}
  if(m<0){document.getElementById('countdown').style.display = "none"; 
      Timer.stop();}

  document.getElementById('countdown').innerHTML = m + ":" + s;
  setTimeout(startTimer, 1000);
}

function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
  if (sec < 0) {sec = "59"};
  return sec;
}
</script>

该代码用于我在打开 PC 后使用其他脚本进行 15 分钟的冥想，我将此倒计时代码放置在 html 文件的最底部，另外其他代码用于显示当地时间、每日待办事项列表和计数计时器，我将 html 文件保存在本地存储中并用 chrome 打开。

根据我的测试，代码有时无法正确播放 mp3。 我想当 mp3 没有存储在本地存储中时会发生这种情况，但似乎这不是互联网速度的问题，即使经过 15 分钟的冥想它也没有响铃，每天早上连续三天直到今天，我都无法集中精神检查时间是否到了。 此外，正如我测试过的那样，即使 mp3 位于我的 PC 本地存储中，也会发生这种情况。

奇怪的是，当我在两种情况下都在 Tryit 编辑器上尝试代码时； only with the countdown script 和 entire scripts of my todo list thing，两者都工作正常，就我测试而言，它正在 100% 响铃。

所以我会考虑将整个代码移到我的个人博客上， seem like only with the above code works as it's light one on my blog,

but the entire code is sometimes work and sometimes are not on my blog.

如果它的播放率为 0%，那么它可能更容易管理，或者最不容易寻求帮助，但我不知道如何处理这个问题，甚至我也不知道如何寻求帮助。

他们是检查文件播放的方法吗？所以我猜它失败时重新加载它？ 还是这只是代码管理不善的问题？

非常感谢您的帮助，谢谢。

Answer 1

奇怪的是，我花了很多时间才找到这个简单的问题。

我知道如果没有用户手势，网页无法以编程方式在移动设备上播放音频文件。但我认为在桌面上并非如此。

嗯，这不是同一个限制，但有一个！

音频播放不需要直接点击按钮来触发.play()...但用户必须至少«与文档交互»。只需在正文中单击即可！

这就是为什么我对你倒计时的测试都失败了......它不需要在 10 秒倒计时内点击。

在快速阅读this Google Updates article，日期为 2016 年 3 月（！）后，我尝试通过控制台记录错误。那是在 Codepen 中……所以在 iframe 中！ See here

play() 失败，因为用户没有先与文档交互。

如果用户点击文档中的任意位置，播放将起作用。
所以我给你加了一个按钮作为提醒。

我还稍微改进了您的倒数计时器...请随时提出相关问题。 这是你的代码：

document.getElementById('atLeastOneClick').addEventListener("click",function(){
  this.innerHTML="Ok for meditation.";
});


document.getElementById('countdown').innerHTML = 0 + ":" + 10;

var bell = new Audio('http://soundbible.com/mp3/Store_Door_Chime-Mike_Koenig-570742973.mp3');

var timer_interval;
timer_interval = setInterval(Timer, 1000);

function Timer() {
  var presentTime = document.getElementById('countdown').innerHTML;
  var timeArray = presentTime.split(/[:]+/);
  var m = parseInt(timeArray[0]);
  var s = parseInt(timeArray[1]);

  s--;

  if(s<0){
    m--;
    s=59;
  }
  if(m<0){
    m=0;
    s=0;
    console.log("Timer ended.");
    bell.play();
    clearInterval(timer_interval);
  }

  document.getElementById('countdown').innerHTML = m + ":" + checkSecond(s);
}

function checkSecond(sec) {
  if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
  return sec;
}

<button id="atLeastOneClick">Click me one time!</button><br>
<span id="countdown"></span>

CodePen