HTML5制作简陋音频播放器

有时候需要在网页中插入一个小的音频，要求不多，有几个按钮，加个进度条就可以。H5自带的audio标签加上control其实就可以，不过还是希望能稍微定制下UI。

想来想去，自己做进度条有点复杂，决定采用jQuery UI的slider组件，或者H5的input range标签。

文件很简单：

index.html
index.css
index.js

先看看html：

其中，

用于适配移动端浏览。jquery.ui.touch-punch.min.js以及$('#widget').draggable();用于使jquery ui对触摸动作响应，不然无法拖动，只能点击进度条。

再看body，没啥好说的，盗了鹅厂的一个音频链接，3个控制按钮，音频的current time以及duration，一个jQuery UI的slider（在js里实例化），一个input range标签。

    
    
播放器
    

        
        
        
    
    

        
00:00
        
--:--
    
    

    

如下图：

image.png

audio标签可以把控件显示control去掉，或者在js里new一个audio对象(不过这种做法可能不会预先载入音频)。

css部分比较随性，供参考，slider的选择器还是花了点时间的，比如background-color不认，只认background等：

.audio-time {
    margin-top: 20px;
    width: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#slider1.ui-slider {
    height: 10px;
    width: 200px;
    background-color: antiquewhite;
}

#slider1 .ui-slider-handle {
    border-radius: 50%;
    border-color: indianred;
}


#slider1 .ui-slider-range {
    background: orange;
}

#range1 {
    width: 200px;
}

最后看js部分：

//格式化播放时间
function formatTime(sec) {
    var newsec = Math.ceil(sec);
    var s = newsec % 60;
    var m = Math.floor(newsec / 60);
    return ('00' + m).substr(-2) + ':' + ('00' + s).substr(-2);
}

$(function () {
    $('#slider1').slider({
        orientation: "horizontal",
        range: "min",
        max: 300,
        min: 0,
    });

    var sliding = false; //正在滑动
    var stopped = true; //停止了

    var audio1 = $('#audio1').get(0);
    var duration = 0;
    var play = $('#play');
    var pause = $('#pause');
    var stop = $('#stop');

    play.on('click', () => {
        audio1.play();
        stopped = false;
    });
    pause.on('click', () => {
        audio1.pause();
        stopped = true;
    });
    stop.on('click', () => {
        audio1.pause();
        audio1.currentTime = 0;
        stopped = true;
    });

    $('#audio1').on('canplay', () => {
        console.log('canplay');
        if(duration == 0) {
            duration = audio1.duration;
            $('#ttime').text(formatTime(duration));
        }
    });

    $('#audio1').on('timeupdate', () => {
        if(sliding) {
            return
        }
        $('#ctime').text(formatTime(audio1.currentTime));
        var value = Math.floor(audio1.currentTime / duration * 300);
        $('#slider1').slider('option', 'value', value);

        $('#range1').val(value);
    });

    $('#audio1').on('ended', () => {
        console.log('ended');
        stopped = true;
        $('#ctime').text('00:00');
        $('#slider1').slider('option', 'value', 0);
    });

    $('#slider1').on('slidestop', (e, ui) => {
        sliding = false;
        var value = $('#slider1').slider('option', 'value');
        var ctime = value * duration / 300;
        audio1.currentTime = ctime;
        $('#ctime').text(formatTime(ctime));
        console.log('值最终变为: ' + value);
    });

    $('#slider1').on('slidestart', (e, ui) => {
        sliding = true;
        console.log('正在滑动');
    });

    $('#range1').on('change', () => {
        console.log('change');
        sliding = false;
        var value = $('#range1').val();
        var ctime = value * duration / 300;
        audio1.currentTime = ctime;
        $('#ctime').text(formatTime(ctime));
    });
    $('#range1').on('mouseup', () => {
        sliding = false;
        var value = $('#range1').val();
        var ctime = value * duration / 300;
        audio1.currentTime = ctime;
        $('#ctime').text(formatTime(ctime));
        console.log('mouseup');
    });
    $('#range1').on('mousedown', () => {
        sliding = true;
        console.log('mousedown');
    });
})

首先是一个格式化时间的函数，因为音频的currentTime、duration都是秒为单位。

然后在ready事件回调里写代码，依次解释下。

1. 初始化slider，这里的max设为300，大概的进度效果是够了；
2. 用sliding变量来开关，如果滑块正在滑动，那么音频播放的timeupdate事件就先别触发；
3. 用stopped来标志音频是否在播放；
4. 初始化DOM，并初始化音频的duration为0；
5. 给按钮添加点击动作，不用解释；
6. 用于canplay事件很容易触发，所以只要获得duration后，就别再重新获取了。如果重新获取，duration会变化，我没搞懂这bug。另外，这里也可以获取后unbind掉事件；
7. timeupdate事件，如果正在拖动滑块，就别让该事件再设定滑块了，直接return；接下来计算value，给滑块赋值，slider跟range的赋值略不同，自己看文档可以；
8. ended后，直接回到0；
9. slider事件，一般就slidestart、slidestop、slidechange，发现只需要前两个就够了；
10. range, 跟上面类似，只不过加了个change事件，这个是防止移动端无法点击进度条进行选择，不太方便；

对于事件，我习惯on的写法，当然也可以类似.click(function)、addEventListener、onclick = function的写法。

总结问题

• 在web端没什么问题，很健壮。
• 手机端iphone chrome测试下，最好先点一下播放，让音频载入了再去点击拖拉进度条，不然没有载入的部分点击有点诡异，或者使用canplaythrough或buffered.end(0)等来控制，参考下菜鸟教程。
• range的手感很差，换成touchstart touchend事件也一样，推荐使用slider吧。
• range的外观定制可能也不如slider，比如已播放的部分的颜色设定。
• 细节小坑可能比较多，大家自己试试就知道了。