EveryLike/pages/API/create-inner-audio-context/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,
        // #ifdef APP
        nativePath: uni.env.CACHE_PATH + 'uni-audio/test/test.mp3' as string,
        // 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()
      fileManager.mkdir({
        dirPath: uni.env.CACHE_PATH + 'uni-audio/test',
        recursive: true,
        success: (res) => {
          fileManager.copyFile({
            srcPath: '/static/test-audio/ForElise.mp3',
            destPath: this.nativePath,
            success: () => {
              console.log("copy成功： ", res)
            }
          })
        },
        fail: (err) => {
          console.log("创建路径失败： ", err.errMsg)
          if (err.errMsg.includes("file already exists")) {
            console.log("已经包含该路径")
            fileManager.copyFile({
              srcPath: '/static/test-audio/ForElise.mp3',
              destPath: this.nativePath,
              success: (res) => {
                console.log("copy成功： ", res)
              },
              fail: (err) => {
                console.log("copy失败： ", err)
              }
            })
          }
        }
      })
      // #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>