前言

近期公司要开发音频播放功能，直播的视频格式因是m3u8，所以使用了video.js开发。而点播具备常用功能，所以了解了一下audio属性，在此记录。

需求

常规播放暂停功能
上下首切换
自定义进度条
拖拽进度条调整进度
自动播放

开始开发

原生JS开发。

首先创建audio标签：

1	<audio id="myAudio" src="" style="display: none;" controls="true"></audio>

js中获取audio对象：

1	var myAudio = document.querySelector('#myAudio');

播放暂停功能

这里比较简单，只要做好防止用户频繁点击时的报错以及是否正在播放时的状态就好了。

1
2
3

myAudio.paused; // 播放状态，暂停时返回true
myAudio.pause(); // 暂停
myAudio.play(); // 播放

上下首切换功能

此处需判断上首/下首是否存在，若不存在则return。

如果当前音频在播放时需要暂停当前播放：

1	if(!myAudio.paused) myAudio.pause();

然后再将新的播放地址写入audio.src内，写入完成后触发播放功能。

1	myAudio.onended // 当前音频播放结束时触发

当前音频播放完毕后播放下一首（需判断是否存在下一首）。

自定义进度条

要用到的事件方法及属性

自定义进度条开始前，需要先普及几个audio的事件方法及属性：

myAudio.onloadstart // 浏览器开始查找音频时触发
myAudio.oncanplay // 可以播放此音频时触发
myAudio.ontimeupdate // 当播放时间发生变化时触发
myAudio.onerror // 播放发生错误时触发
myAudio.load(); // 开始/重新加载音频
myAudio.currentTime; // 设置或返回音频中的当前播放位置（以秒计）
myAudio.duration; // 返回当前音频的长度（以秒计）

查自于W3CSchool，更详细的解释可以点击这里查看。

实现步骤

当开始播放时先调用myAudio.load()，让浏览器开始加载此音频，加载完成后会触发oncanplay事件。（不可在oncanplay时调用，否则不会被执行）
在oncanplay中，获取音频总播放时长并写入到进度条处。
使用ontimeupdate事件，获取当前播放时长currentTime，并由此计算滚动条的位置及将当前播放时间写入进度条处。
1
let 当前播放进度百分比 = (myAudio.currentTime/myAudio.duration <= 1 ? myAudio.currentTime/myAudio.duration : 1)*100+'%';

现在进度条已经可以随着音频的播放而移动了。

拖拽进度条调整进度功能

需要用到的事件

这里需要用到touch事件，分别是：

1
2
3

obj.addEventListener('touchstart',fun); // 开始触摸
obj.addEventListener('touchmove',fun); // 开始移动
obj.addEventListener('touchend',fun); // 结束触摸

开始触摸时（touchstart），touchmove和touchend需要写在touchstart里面：

obj.addEventListener('touchstart',function(){
    obj.addEventListener('touchmove',fun);
    obj.addEventListener('touchend',fun);
})

当开始移动时（touchmove），获取ev.touches[0].clientX（需要做好超出和小于0的判断）：

1	let clientX = ev.touches[0].clientX < 0 ? 0 : ev.touches[0].clientX > document.body.clientWidth ? document.body.clientWidth : ev.touches[0].clientX;

并同时计算出当前移动位置的播放时长赋值给页面并记录：

1	let moveLength = myAudio.currentTime = myAudio.duration/document.body.clientWidth*clientX;

当手指松开后（touchend），可以进行手指松开后的操作，比如开始播放等。

自动播放功能

由于IOS系统不允许进入页面后直接播放，必须通过用户的实际操作进行触发，所以与产品经理商量后未添加此功能。

如果必须要添加的话，可以进入页面后给用户一个引导弹层来触发播放。

参考文章

手机的 HTML5 Audio 播放问题记录

Audio在移动端的实践

-------------End，感谢阅读！-------------