vue 音频播放功能
【代码】vue 音频播放功能。
·
//结构
<audio id="audioID" ref="audio" class="aud" @ended="audioEnded">
<source :src="audioUrl" />
</audio>
//数据
data() {
return {
audioUrl:'',//音频资源
audioOpen:false
}
},
methods: {
// 音频按钮
auditionFun() {
if(!this.audioOpen){
console.log("进入播放");
this.ringPreview()
}else{
console.log("进入暂停");
this.pause()
}
},
//监听播放完成的回调
audioEnded(){
this.audioOpen=false
console.log('end')
},
// 播放音频
play(){
this.audioOpen=true
this.$refs.audio.play();
},
// 暂停播放
pause(){
this.audioOpen=false
this.$refs.audio.pause();
},
// 音频合成语音接口
ringPreview() {
data.txt = this.textArea //合成语音文本
ringPreview(data)
.then(res => {
console.log('音频接口', res)
if (res.success) {
document.querySelector('#audioID').setAttribute("src", res.data.url) //使用这种方式赋值视频资源
this.play() //播放
}
})
.catch(err => {
console.log('err', err)
})
}
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)