vue audio页面多条语音播放

最新推荐文章于 2024-06-05 15:10:41 发布

你爱喝果粒橙吗

最新推荐文章于 2024-06-05 15:10:41 发布

阅读量858

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_64064327/article/details/125962997

版权

使用<audio> 播放语音这个大家肯定都知道（当然除了我）

这里就是给大家提供个思路，写完也没优化优化，大家看看有个思路就行

我做的呢，就是把播放语音封装成立一个组件，播放不难，难的大家在一个同甘苦，共患难，

点击了下一个，其他的的语音不停，这就很是烦人

最后多方了解，搞出个这样的

// 父  触发子语音播放，只保证当前只有一个播放
  myWorkAudioClick(ind) {
    let _this = this
      for (let k = 0; k < _this.MyHomeworkData.length; k++) {
        if (k != ind) {
            _this.$refs.myWorkAudioRef[k].$refs.audio.pause()  // 关闭其他语音
            _this.$refs.myWorkAudioRef[k]._data.isPlaying = false 
            // 这个是对子组件里数据的修改
        }
      }
      
     // 触发子组件里的播放方法
      _this.$refs.myWorkAudioRef[ind].handlePlay()
  }





// 子组件
methods: {
    handlePlay() {
      let audio = this.$refs.audio;
      console.log(this.url);
      // console.log(this.isPlaying);
      if (!this.isPlaying) {