2013-05-08 88 views
-3

我正在寻找一个jquery倒计时时钟或定时器开始与声音播放时已设置日期。我发现很多网站有jquery倒计时的exapmles,但没有声音播放时,它开始计数时...jQuery的声音播放倒计时钟

我怎么能声音添加到一个Jquery倒计时器?

感谢

更新:这是mootool计时器http://jsfiddle.net/QH6X8/185/的演示,我想用一个声音播放!任何想法如何做到这一点? html代码:

<div id="countdown"></div> 

而且mootool代码;

var end = new Date('16 May 2013 13:29:00'); // set expiry date and time.. 

var _second = 1000; 
var _minute = _second * 60; 
var _hour = _minute * 60; 
var _day = _hour *24 
var timer; 

function showRemaining() 
{ 
    var now = new Date(); 
    var distance = end - now; 
    if (distance < 0) { 
     // handle expiry here.. 
     clearInterval(timer); // stop the timer from continuing .. 
     alert('Expired'); // alert a message that the timer has expired.. 

     return; // break out of the function so that we do not update the counters with negative values.. 
    } 
    var days = Math.floor(distance/_day); 
    var hours = Math.floor((distance % _day)/_hour); 
    var minutes = Math.floor((distance % _hour)/_minute); 
    var seconds = Math.floor((distance % _minute)/_second); 
    var milliseconds = Math.floor((distance % _second)); 

    document.getElementById('countdown').innerHTML = 'Days: ' + days + '<br />'; 
    document.getElementById('countdown').innerHTML += 'Hours: ' + hours+ '<br />'; 
    document.getElementById('countdown').innerHTML += 'Minutes: ' + minutes+ '<br />'; 
    document.getElementById('countdown').innerHTML += 'Seconds: ' + seconds+ '<br />'; 
    document.getElementById('countdown').innerHTML += 'Milliseconds: ' + milliseconds+ '<br />'; 
} 

timer = setInterval(showRemaining, 1); 
+2

查找倒计时插件,您喜欢视觉第一,那么我们可以告诉你如何让它播放声音。 – 2013-05-08 06:18:18

+0

好的,听起来不错。将尽快更新我的原始文章。谢谢 – 2013-05-08 07:12:59

回答

3

最好的办法是使用音频插件解决方案。

最好的之一是howler.js

+0

谢谢,但我想在倒计时开始时播放声音... – 2013-05-08 07:28:55

+0

那么,我们不打算为你做:)显示一些努力。 – mreq 2013-05-08 07:30:24

+0

...... !!!好吧,这就是为什么我在寻找帮助,伙伴。我知道jquery和mootool倒计时如何工作,但不知道如何将代码与声音播放代码结合时的样子。 – 2013-05-08 08:21:29

1

使用howler.js作为音频插件。 然后自定义您的custom.js这样

var mySound = new Howl({ 
urls: ['yoursound.mp3'], 
autoplay: true 
}); 

对于倒数计时器使用本jquery.countdown

然后自定义您的custom.js这样

$('#clock').countdown('2016/10/31').on('update.countdown', 
    function(event) {  
    var $this = $(this).html(event.strftime('' 
    + '<div><span>%-w</span>week%!w</div>' 
    + '<div><span>%-d</span>day%!d</div>' 
    + '<div><span>%H</span>hr</div>' 
    + '<div><span>%M</span>min</div>' 
    + '<div><span>%S</span>sec</div>')); 
});