inner-audio-path.uvue

<template>
  <page-head :title="title"></page-head>
  <view class="uni-padding-wrap uni-common-mt">
    <view class="uni-title">
      <text class="uni-title-text">音频路径示例</text>
    </view>
    <view class="formats" v-for="(item,index) in supportPaths" :key="index">
      <text class="uni-subtitle-text">{{item.description}}</text>
      <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
        @click="play(item.src,index)"></image>
    </view>
  </view>
</template>

<script>
  type AudioPath = {
    description : string
    src : string
  }
  export default {
    data() {
      return {
        title: 'audio-path',
        playIndex: 0,
        isPlaying: false,
        _audioContext: null as InnerAudioContext | null,
        supportPaths: [
          {
            description: '本地路径：/static方式',
            src: '/static/test-audio/ForElise.mp3'
          },
          {     
            description: '本地路径：../static/',
            src: '../../../static/test-audio/ForElise.mp3'
          },
          {
            description: '网络路径',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
          },
          {
            description: '不存在的音频',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/invalid_url.mp3'
          },
          {
            description: '错误路径',
            src: '../static/test-audio/ForElise.mp3'
          },
        ] as Array<AudioPath>
      }
    },
    onReady() {
      this._audioContext = uni.createInnerAudioContext();
    },
    onUnload() {
      if (this._audioContext != null) {
        this.pause();
        this._audioContext!.destroy()
      }
    },
    methods: {
      pause() {
        this._audioContext!.pause();
        this.isPlaying = false;
      },
      play(audioUrl:string, index:number) {
        // console.log(index,audioUrl);
        if (this.isPlaying && this.playIndex == index) {
          this.pause();
          return;
        }
        this.playIndex = index
        this._audioContext!.src = audioUrl;
        this._audioContext!.play();
        this.isPlaying = true;
        this._audioContext!.onPlay(() => {
          console.log('开始播放');
        });
        this._audioContext!.onEnded(() => {
          console.log('播放结束');
          this.isPlaying = false;
        });
        this._audioContext!.onError((err) => {
          this.isPlaying = false;
           console.log('err', err);
        });
      }
    }
  }
</script>

<style>
  .formats {
    align-items: center;
  }

  .icon-play {
    width: 60px;
    height: 60px;
    margin: 10px;
  }
</style>