项目里需要一个播放功能,样式如下:
demo样式
而 html <audio> 元素加上 control 属性后的播放器样式是这样的:
原生audio元素样式
思路:
原生样式不能改变,所以需要自己写出 demo 样式,然后点击 demo 的暂停和播放键时,捕获 audio 对象,控制它的播放和暂停事件。
注:audio相关事件
audio属性
步骤:
- 按钮被点击后,判断当前音频是否在暂停状态:
if(audio.paused)
如果是,就播放:
audio.play()
反之则暂停:
audio.pause()
- 在播放状态需要每秒改变音乐剩余播放时间,则需要定时器每秒让时间减去一秒:
this.opreate = setInterval( function() {
}, 1000)
- 当为暂停状态时清除计时器:
window.clearInterval(this.opreate)
大体思路就是这样,还有几个细节:播放时时间到0的时候也要清除定时器,然后停止播放;audio.duration 得到的音频总时长有小数点需要化整;暂停时右上角的时间也要定格为当前暂停的时间。
demo地址
源码地址
网友评论