标签实现设置播放次数的功能
audio有一个事件: end
开始思路是:通过给标签设置loop属性后,监听播放结束的次数,来控制播放。
function playTimes(elem, times) {
var start = 0;
elem.addEventListener("ended",function() {
start++;
start == times && elem.pause();
});
}
这种思路行不通,因为循环播放功能时,无法监听ended事件。
换个思路是:不设置循环属性,通过监听播放结束的次数来控制.在语音结束后再次调用播放方法.
mounted(){
//首次进入页面时
this.audioPlay = this.$refs.audio
this.audioPlay.addEventListener('ended',this.limitPlay)
},
//播放语音
playTip(){
this.testAutoPlay()
.then((res)=>{
console.log(res)
})
},
//测试是不是可以自动播放并返回结果
testAutoPlay () {
let autoplay = false
return new Promise(resolve => {
let audioPlay = this.$refs.audio
audioPlay.src= this.audioUrl
// audioPlay.currentTime = 0; //从头开始播放提示音
// audioPlay.muted = true; //静音播放
// play返回的是一个promise
audioPlay.play().then(() => {
// 支持自动播放
autoplay = true;
}).catch(() => {
// 不支持自动播放
autoplay = false;
}).finally(() => {
// 告诉调用者结果
resolve(autoplay);
});
});
},
//循环播放次数判断
limitPlay(){
this.start++;
console.log("次数限制"+this.start)
if(this.start <= this.playTimes){
this.playTip()
}else{
this.audioPlay.pause()
}
}
这种思路需要浏览器支持语音播放才可以,谷歌浏览器会拦截自动播放,所以需要设置一下浏览器声音属性,具体怎么设置请看这里.希望对你有帮助.