简易播放器

项目里需要一个播放功能，样式如下：

demo样式

而 html <audio> 元素加上 control 属性后的播放器样式是这样的：

原生audio元素样式

思路：

原生样式不能改变，所以需要自己写出 demo 样式，然后点击 demo 的暂停和播放键时，捕获 audio 对象，控制它的播放和暂停事件。
注：audio相关事件
audio属性

步骤：

1. 按钮被点击后，判断当前音频是否在暂停状态：

if(audio.paused)

如果是，就播放：

audio.play()

反之则暂停：

audio.pause()

2. 在播放状态需要每秒改变音乐剩余播放时间，则需要定时器每秒让时间减去一秒：

this.opreate = setInterval( function() {
            
                }, 1000)

3. 当为暂停状态时清除计时器：

window.clearInterval(this.opreate)

大体思路就是这样，还有几个细节：播放时时间到0的时候也要清除定时器，然后停止播放；audio.duration 得到的音频总时长有小数点需要化整；暂停时右上角的时间也要定格为当前暂停的时间。
demo地址
源码地址