vue 循环多个audio播放器，点击一个播放其它暂停

需求：封装一个音乐播放器组件，并在同一个页面多次引入，播放其中一个时其它暂停播放，效果图如下：

1

1.播放器的代码可以直接参考Vue 实现音乐播放器，上图样式是稍微改了下的，看的更顺眼点。
2.为了解决点击一个播放其它暂停（指的是按钮变回暂停），目前做法是通过父页面的数据设置一个isPlay进行控制，当组件播放状态进行变化时，修改数据的isPlay达到修改组件按钮状态的目的。
3.遇到的另一个问题是，滑块拖动进度条问题，滑块拖动成功，但是进度设置无效。解决方法可以看这里vue实现audio进度拖拽播放及拖拽播放问题解决

原因：

2

解决方式：

3

对应本文的代码就是：

4

5

完整代码

父页面引用

组件页

如果有更好的实现方式，欢迎留言探讨。