这两天折腾着实现一个带有声音的倒计时，效果虽简单，不过还是挺有趣的……

最终实现的效果：

timeticker

环形进度条

本着不重复造轮子的原则，直接采用现成的 JS插件 progressbar.js，几行代码直接实现：

<div class="circle-progress"></div>

    var bar = new ProgressBar.Circle(".circle-progress", {
        color: "green",
        strokeWidth: 4,
        trailColor: "#eee",
        duration: 10,
        text: {
            value: '<div class="circle-progress-btn" data-status="init"><i class="glyphicon glyphicon-play"></i></div>',
            style: {
                color: 'gray',
            },
        }
    });

然后就可以很方便的控制进度了：

bar.animate(0.3)

倒计时

要实现倒计时的功能，我们可以通过  setInterval() 来实现：

<div class="clock">
    <span id="clock-time">10</span> / <span id="total-time">10</span>
</div>

var interval;
interval= setInterval(updateTime, 1000);
function updateTime(){
     var total = $("#total-time").html();
     var left = $("#clock-time").html();
     var now = left - 1;
     if (now >= 0){
           $("#clock-time").html(now);
           bar.animate(1-now/total);
      }else{
           clearInterval(interval);
      }
}

音效

我们要实现开始、结束、倒计时过程的声音，声音可以通过 HTML 的 audio 来实现：

var diAudio = document.createElement("audio");
diAudio.setAttribute("src", "sound/di.mp3");

// 开始提示音结束后启动倒计时
var startAudio = document.createElement("audio");
startAudio.setAttribute("src", "sound/start.mp3");
startAudio.addEventListener("ended", function(){
    $(".circle-progress-btn").data("status", "pause");
    $(".circle-progress-btn").trigger("click");
});

// 结束提示音停止后复位倒计时
var endAudio = document.createElement("audio");
endAudio.setAttribute("src", "sound/end.mp3");
endAudio.addEventListener("ended", function(){
    $("#clock-time").html($("#total-time").html());
    $(".circle-progress-btn").html('<i class="glyphicon glyphicon-play"></i>');
    $(".circle-progress-btn").data("status", "init");
    bar.animate(0);
});

暂停/播放

倒计时过程中如果要暂停，我们可以使用 clearInterval() 来实现，同时也需要对计时器的状态进行修改：

    $(".circle-progress-btn").click(function(){
        var status = $(this).data("status");
        console.log(status);
        if (status == "init"){
            $(this).html('<i class="glyphicon glyphicon-pause"></i>');
            startAudio.play();

        }else if (status == "pause"){
            $(this).html('<i class="glyphicon glyphicon-pause"></i>');
            $(this).data("status", "play")
            clearInterval(interval);
            interval= setInterval(updateTime, 1000);
            function updateTime(){
                var total = $("#total-time").html();
                var left = $("#clock-time").html();
                var now = left - 1;
                if (now >= 0){
                    diAudio.play();
                    $("#clock-time").html(now);
                    bar.animate(1-now/total);
                }else{
                    clearInterval(interval);
                    endAudio.play();
                }
            }

        }else if (status == "play") {
            $(this).html('<i class="glyphicon glyphicon-play"></i>');
            $(this).data("status", "pause")
            clearInterval(interval);
        }
    });

适配移动设备

完成后，发现这个带声音的倒计时在Chrome下可以很完美地运行。然而把页面放到微信中去，却发现倒计时正常，开始音效也正常，滴滴声跟结束音效都不能正常播放！

仔细研究一番，才知道原来移动设备是不允许直接通过代码控制音频加载播放的，因为用户在移动网络下可能会产生昂贵的数据流量费用。

而开始音效之所以能够正常播放，是因为它是由用户 click 触发的；滴滴声和结束声是在 setInterval() 中触发的，因此也就没办法播放了。不过幸运的是，对于已经加载的音频，我们可以通过代码控制其播放。所以我们只要在用户click的时候把需要的音频文件都加载下来就可以了，修改代码：

    $(".circle-progress-btn").click(function(){
        var status = $(this).data("status");
        console.log(status);
        if (status == "init"){
            diAudio = document.createElement("audio");
            diAudio.play();
            diAudio.src = "sound/di.mp3";

            startAudio = document.createElement("audio");
            startAudio.play();
            startAudio.src = "sound/start.mp3";
 
            endAudio = document.createElement("audio");
            endAudio.play();
            endAudio.src = "sound/end.mp3";

            $(this).data("status", "ready");
            $(this).trigger("click");

        }else if (status == "ready"){
            $(this).html('<i class="glyphicon glyphicon-pause"></i>');
            startAudio.play();

        }else if (status == "pause"){
......

在第一次 play 的时候，由于 src 未设置，因此实际上是没有声音播放的：

diAudio = document.createElement("audio");
diAudio.play();
diAudio.src = "sound/di.mp3";

搞定收工～～～

• 实现效果：Demo
• 源码参考：Github

参考：

• http://stuff-things.net/2015/01/08/controlling-html5-audio-on-mobile-devices/