create-inner-audio-context.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1;">
  <!-- #endif -->
    <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>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  type AudioPath = {
    description : string
    src : string
  }
  export default {
    data() {
      return {
        playIndex: 0,
        isPlaying: false,
        // #ifdef APP
        nativePath: uni.env.CACHE_PATH + 'uni-audio/test/test.mp3' as string,
        // #endif
        // #ifdef APP-ANDROID
        sdcardPath: 'sdcard/uni-audio/test.mp3',
        // #endif
        _audioContext: null as InnerAudioContext | null,
        supportPaths: [
          {
            description: '本地路径：/static方式',
            src: '/static/test-audio/ForElise.mp3'
          },
          {
            description: '本地路径：../static/',
            src: '../../../static/test-audio/ForElise.mp3'
          },
          // #ifdef APP
          {
            description: '本地路径：env方式',
            src: 'env'
          },
          // #endif
          {
            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/ForElise22.mp3'
          },
        ] as Array<AudioPath>
      }
    },
    onReady() {
      this._audioContext = uni.createInnerAudioContext();
      this._audioContext!.onPlay(() => {
        console.log('开始播放');
      });
      this._audioContext!.onEnded(() => {
        console.log('播放结束');
        this.isPlaying = false;
      });
      this._audioContext!.onError((err) => {
        this.isPlaying = false;
        console.log('err', err);
      });

      // #ifdef APP
      const fileManager = uni.getFileSystemManager()
      try {
        fileManager.rmdirSync(uni.env.CACHE_PATH + 'uni-audio/test', true)
      } catch (e) {
      }

      try {
        fileManager.mkdirSync(uni.env.CACHE_PATH + 'uni-audio/test', true)
      } catch (e) {
      }
      try {
        fileManager.copyFileSync(
          '/static/test-audio/ForElise.mp3',
          this.nativePath)
      } catch (e) {
      }
      // #endif
    },

    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;
        }
        // #ifdef APP
        if (audioUrl == 'env') {
          audioUrl = this.nativePath
        }
        // #endif

        this.playIndex = index
        this._audioContext!.src = audioUrl;
        this._audioContext!.play();
        this.isPlaying = true;
      }
    }
  }
</script>

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

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