jquery - 带有声音播放的jquery倒计时时钟

Question

我正在寻找一个 jquery 倒计时时钟或一个计时器，以便在设置日期后开始播放声音。我发现很多网站都有 jquery 倒计时的例子，但是在开始计数时没有声音播放......

如何向 Jquery 倒数计时器添加声音？

谢谢

http://jsfiddle.net/QH6X8/185/更新：这是我想使用声音播放的 mootool 计时器演示！知道怎么做吗？ 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);

Answer 1

最好的选择是使用音频插件解决方案。

最好的之一是howler.js。

Answer 2

使用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>'));
 });