前言:
在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的资料: