如何让javascript闹钟100％播放？ [英] How to make javascript alarm to be played 100%?

问题描述

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

这个代码是我用我的电脑和其他脚本完成后15分钟的冥想，我放置了这个倒计时代码到html文件的大部分底部，另外其他代码用于显示本地时间，每日待办事项列表和计时计时器，我将html文件保存在本地存储和放大器上。用铬打开。

The code is for my 15 minutes of meditation right after turn of my PC with other scripts, I placed this countdown code to most bottom of the html file and additionally the other codes are for display local time, list of daily todo and countup timer, and I'm keeping the html file on local storage & opening with chrome.

正如我测试的那样，代码有时不能正常播放mp3。
我想当mp3没有存储在本地存储上兑现时会发生这种情况，但看起来这不是互联网速度的问题，即使经过15分钟的冥想它也没有播放铃声，这是三天每天早上排到今天，所以我无法集中精力检查时间是否到了。
另外，正如我测试的那样，即使mp3位于我的PC本地存储上也会发生。

As I've tested, the code is not play the mp3 properly sometimes. I guess it happens when the mp3 is not stored on cashed on local storage, but seem like it's not the matter of the internet speed though, even after 15 minutes of meditation it didn't play the bell, it's three days of row every morning until today, so I couldn't concentrate solidly to check whether the time is up or not. Also as I've tested, it happens even the mp3 is located on my PC local storage.

奇怪的部分是当我在Tryit上尝试代码时两个案例的编辑; 仅限倒计时脚本& 我的todo列表内容的整个脚本，两者都运行正常，它正在播放到目前为止我已经测试了100％。

The weird part is when I try the code on Tryit editor in both of case; only with the countdown script & entire scripts of my todo list thing, both works fine, it's playing the bell 100% as so far as I tested.

所以我考虑在我的个人博客上移动整个代码，
似乎只有上面的代码才有效，因为它在我的博客上很轻松，

So I'd consider to move the entire code on my personal blog, seem like only with the above code works as it's light one on my blog,

但整个代码有时会有效，有时不在我的博客上。

如果它发挥0％那么它可能更容易管理或者更容易寻求获得帮助，但我不知道如何处理这个甚至我不知道如何问获得帮助。

If it's play 0% then it could be easier to manage or least easier to ask for get help, but I have no idea how to handle this and even I don't know how to ask for get help for it.

他们是否有办法检查文件？所以当它失败时重新加载我猜？
或者这只是代码管理不善的问题？

Is their a way to check files are played? so reload it when it fails I guess? or is this just a matter of mismanaging of the code?

帮助真的很感激，谢谢。

Help would be really grateful, Thanks.

推荐答案

在我发现这个简单的问题之前，我花了很多时间。

It strangely took a lot of time before I find this simple issue.

我知道这是一个网页没有用户手势，无法以编程方式在移动设备上播放音频文件。但我觉得台式机不是这样的。

I was aware that a web page can not programmatically play an audio file on a mobile device without user gesture. But I tought it was not the case on desktop.

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

Well, it's not the same restriction, but there is one!

音频播放不需要直接点击按钮来触发 .play <） ...但是用户必须至少«与文件»。只需点击一下即可！

The audio play does not require a direct button click to trigger the .play()... But the user has to at least «interact with the document». Be it just a click in the body!

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

And that was why my tests on your countdown were all failing... It did not need to click within the 10 seconds countdown.

快速阅读这篇谷歌更新文章，日期为2016年3月（！），我试图控制日志错误。那是在Codepen中...所以在 iframe 中！ 见这里

After a quick read of this Google Updates article, dated march 2016 (!), I tried to console log an error. That was in Codepen... So in an iframe! See here

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

play() failed because the user didn't interact with the document first.

如果用户点击文档中的任意位置，游戏将工作。

所以我添加了一个按钮作为提醒。

If the user click anywhere in the document, the play will work.
So I added you a button as a reminder.

我也改进了你的倒数计时器...随意问一下它的问题。
这是你的代码：

I also improved your countdown timer a bit... Feel free to ask questions about it. here is your code:

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

这篇关于如何让javascript闹钟100％播放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！