uniapp中的uni.createInnerAudioContext() 音频创建

1. 因为做的小程序需要视频讲解 默认展示播放按钮，当点击播放的时候 显示暂停音乐这样的一个效果。

 <view @click="onPlayMusic">
      <view class="play-music" v-if="isPlaying">
        播放音乐 <u-icon name="play-right"></u-icon>
      </view>
      <view class="play-music" v-else>
        暂停音乐 <u-icon name="pause"></u-icon>
      </view>
    </view>

写了一个简单的点击事件 

<script>
  const http = uni.$u.http

  export default {
    data() {
      return {
        isPlaying: true, //展示音频
        MusicUrl: 'https://static.yzb10086.com/lysst/audio/ee3958d2c59c43c5af2d67096087ad9a_68282.mp3', //播放的链接
      }
    },

    methods: {
      //播放音乐
      onPlayMusic() {
        if (!this.innerAudioContext) {
          this.innerAudioContext = uni.createInnerAudioContext();
          this.innerAudioContext.src = this.MusicUrl;
        }

        if (this.isPlaying) {
          this.innerAudioContext.pause(); // 暂停音乐
        } else {
          this.innerAudioContext.play(); // 播放音乐
        }

        // 切换音乐播放状态
        this.isPlaying = !this.isPlaying;
        // 监听音乐播放结束事件，用于在音乐播放结束时更新播放状态和按钮显示
        this.innerAudioContext.onEnded(() => {
          this.isPlaying = false;
        });
      }

    }
  }
</script>

 <view class="goods-item">
      <view class="goods-item-music" v-for="(item,index) in MusicData" :key="index" @click="CheckMusicPlay(item.url)">
        {{item.title}}
      </view>

    </view>

<script>
 export default{
  data{
   return{
       MusicData: [{
            title: '狮子王',
            url: 'https://static.yzb10086.com/lysst/audio/04eb1225cea84fb0b8e147b2d6b42cae_108563_47896.mp3'
          },
          {
            title: '翠屏母',
            url: 'https://static.yzb10086.com/lysst/audio/04eb1225cea84fb0b8e147b2d6b42cae_108581_47895.mp3'
          },
          {
            title: '仙女散花',
            url: 'https://static.yzb10086.com/lysst/audio/cad54c3d16ee4a7baf749908cda95825_70678_47699.mp3'
          },
          {
            title: '万年古榕',
            url: 'https://static.yzb10086.com/lysst/audio/cad54c3d16ee4a7baf749908cda95825_47039_47698.mp3'
          }
        ]


   }
  },
methods:{

/**
       *  多首曲目可以进行切换自如的播放
       */
      CheckMusicPlay(newsUrl) {
        if (this.innerAudioContext && this.innerAudioContext.src === newsUrl) {
          // 当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放
          if (!this.innerAudioContext.paused) {
            this.innerAudioContext.pause(); // 暂停当前音频
          } else {
            this.innerAudioContext.play(); // 继续播放当前音频
          }
        } else {
          if (this.innerAudioContext) {
            this.innerAudioContext.stop(); // 停止当前音频
            this.innerAudioContext = null;
          }

          this.innerAudioContext = uni.createInnerAudioContext();
          this.innerAudioContext.src = newsUrl;
          this.innerAudioContext.play(); // 播放新音频
        }
      }


}


}



</script>