有时候需要在网页中插入一个小的音频，要求不多，有几个按钮，加个进度条就可以。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，比如已播放的部分的颜色设定。
- 细节小坑可能比较多，大家自己试试就知道了。
网友评论