inner-audio-format.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 supportFormats" :key="index">
      <text class="uni-subtitle-text">{{item.format}}</text>
      <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
        @click="play(item.src,index)"></image>
    </view>

    <view class="uni-title">
      <text class="uni-title-text">不支持的音频格式</text>
    </view>
    <view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
      <text class="uni-subtitle-text">{{item.format}}</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 AudioFormat = {
    format : string
    src : string
  }
  export default {
    data() {
      return {
        title: 'audio-format',
        playIndex: 0,
        isPlaying: false,
        _audioContext: null as InnerAudioContext | null,
        supportFormats: [
          {
            format: 'mp3',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
          },
          {
            format: 'mp4',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp4'
          },
          {
            format: 'm4a',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.m4a'
          },
          {
            format: 'aac',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aac'
          },
          {
            format: 'flac',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac'
          },

          {
            format: 'ogg',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg'
          },
          {
            format: 'wav',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
          },
        ] as Array<AudioFormat>,
        notSupportFormats: [
          {
            format: 'wma',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
          },
          {
            format: 'aiff',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
          },
          {
            format: 'caf',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
          },
          {
            format: '错误格式',
            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
          },
        ] as Array<AudioFormat>
      }
    },
    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, index) {
        // 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>