vue来监听audio的各种事件

前言：

       在vue中用audio来播放普通的音频，来实现一个pc版本的聊天框效果。

效果图：

*当然这里不涉及所有的代码，只有audio绑定的事件解释

代码：

1、界面上：

  
   <!--音频-->
        <audio v-if="showAudio"
               ref="audioRef"
               class="bgMusic"
               controls
               :autoplay="true"
               style="display: none"
               @ended="overAudio"
               @pause="onPause"
               @play="onPlay"
        >
            <source :src="audioUrl" type="audio/mpeg">
        </audio>

2、js部分：

            /**
             * audio自身事件
             * */
            // 当音频播放
            onPlay () {
                console.log('开始播放声音');
            },
            // 当音频暂停
            onPause () {
                console.log('暂停播放声音');
            },
           //播放完毕执行
            overAudio(){
                console.log('播放声音完毕');
                this.audioArr.forEach(item=>{
                    item.isStart = true;
                })
            },

更多关于audio的资料：

https://github.com/SevenOutman/vue-aplayer/blob/develop/docs/README.zh-CN.md

https://github.com/wangduanduan/element-audio