HTML5制作简陋音频播放器

2018-05-17 本文已影响0人赤色要塞满了

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

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

文件很简单：

index.html
index.css
index.js

先看看html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="index.css" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script>$('#widget').draggable();</script>
    <title>音频播放器</title>
</head>

其中，

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

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

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

<body>
    <audio id="audio1" controls>
        <source src="http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46" type="audio/mpeg" />
    </audio>
    <h1>播放器</h1>
    <div class="container">
        <input type="button" value="播放" id="play" />
        <input type="button" value="暂停" id="pause" />
        <input type="button" value="停止" id="stop" />
    </div>
    <div class="audio-time">
        <div id="ctime">00:00</div>
        <div id="ttime">--:--</div>
    </div>
    <div id="slider1" class="slider"></div>
    <input id="range1" type="range" style="margin: 20px;" max="300" value="0"/>
</body>
</html>

如下图：

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事件回调里写代码，依次解释下。

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

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

总结问题

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

HTML5制作简陋音频播放器

总结问题

猜你喜欢

热点阅读