本文介绍了如何使用JavaScript和HTML5来创建自定义音频播放器，包括隐藏默认audio标签并覆盖样式，利用API如play()、pause()、currentTime和duration等控制音乐播放。对于进度条，推荐使用element-ui，并封装事件处理函数，通过timeupdate事件实时更新当前进度。难点在于实时显示进度，这可以通过监听timeupdate事件并转换为分秒格式保存在vuex中实现。
修改audio跟我们之前修改文本框之类的不太一样，不能直接用CSS属性修改，我们需要先写一个默认的audio标签，然后把它隐藏，用新的标签将它覆盖掉，用写好样式后用调用API 的方式控制音乐播放。各种API网上都有，这里列几个常见的：
play()播放；pause（）暂停；currentTime：当前时间；duration总时间；
针对不同的地方添加不同的事件就可以了。本质就是把默认的audio覆盖掉然后利用它的事件实现自定义。进度条可以直接用element-ui，这里建议把将事件换算成分秒的函数封装，不然后期一直CV会很难受。这里主要说两个难点，第一是要实时现实当前进度，这一点我们可以用timeupdata时间完成，这个事件会在数据改变时触发，我们通过这个函数就可以实时获取当前的进度并将它保存到vuex中，以便各个组件交互时统一使用;可以使用e.target.currentTime检测当前的进度时间，再进行转化。
```javascript
` let au=document.getElementById("audioline");
au.addEventListener
最低0.47元/天 解锁文章
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
