html控制多个音频audio css,vue中<audio>自定义样式（页面中包含多个audio）

前言

一开始看到UI设计稿，我内心是十分抗拒的。觉得用原生audio的样式就可以了，也不是特别丑，毕竟时间给的不多，自定义样式还要改逻辑啥的。在网上搜索了一番有没有合适的插件，没有看到心动的。最后还是硬着头皮自己写了。

参考了一个博客，很感谢这位博主，逻辑都可以用。不过原博用的jquery，我自己用vue，而且我的页面可能有不止一个audio，设计稿和原博也很不一样，所以改代码还是花了一番心思。

我这里是按照我的设计稿做出来的样子，如果你的设计稿跟我的不一样，那也只需要改一下css部分和html，js还是能直接套用的。

如果急用的同学可以直接跳到最后看完整的代码，复制了不出意外可以直接用的，只需要把播放按钮的图片改成你自己的图片，再添加可用的audio链接就可以了。

html代码：

@timeupdate.stop="updateProgress(index)" @ended.stop="audioEnded(index)">

{ { item.audio_name }}

{ { audioArr[index].currentTime }}

{ { audioArr[index].duration }}

js代码：export default {

data() {

return {

audioNodes: [], // 用于存放所有 audio 的 DOM 节点

audioArr: [], // 用于维护 audio 的总时长和当前播放时间的数组

content: [ // 存放audio的地址信息，一般是接口返回

{"audio_name":"20210112_1056.m4a","audio_url":"https://xxx.com/android1610420451567524.m4a"},

{"audio_name":"20210112_1056.m4a","audio_url":"https://xxx.com/android1610420451567524.m4a"},

]

}

},

mounted() {

this.audioNodes = document.getElementsByCla