vue 音频播放功能

最新推荐文章于 2025-04-25 08:56:07 发布

湾流~

最新推荐文章于 2025-04-25 08:56:07 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue相关文章标签： vue.js 音视频前端

本文链接：https://blog.csdn.net/qq_40955816/article/details/131311108

vue相关专栏收录该内容

12 篇文章

订阅专栏

 //结构
 <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)
        })
    }
}