小程序音频播放详解

<img class="static-video" @tap="startAudio" v-if="currentPlay==false" :src="imageUrl+'/voice.png'" />
<img class="play-video" v-else  :src="imageUrl+'/play.gif'"/>

data中的数据
currentPlay:false,

第一种方式

// 开启播放音频
startAudio(){
  const innerAudioContext = uni.createInnerAudioContext();//创建并返回内部 audio 
  innerAudioContext.autoplay = false;//不自动播放
  innerAudioContext.src =this.pageInfoBack.leaveReason;//音频的地址，不支持本地路径
  innerAudioContext.obeyMuteSwitch=false;//即使用户打开了静音开关，也能继续发出声音
  // 音频播放事件
  let self=this;
  self.currentPlay=true;//显示播放图标
  innerAudioContext.play();	// 点击按钮音频开始播放事件
  innerAudioContext.onError((res) => {
    self.currentPlay=false;//展示另外一个播放中图标
  });
  innerAudioContext.onEnded(res=>{
    self.currentPlay=false;//展示默认中的图标i
  })
},

官方使用示例

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
innerAudioContext.onPlay(() => {
  console.log('开始播放');
});
innerAudioContext.onError((res) => {
  console.log(res.errMsg);
  console.log(res.errCode);
});

为什么我不使用官方示例

因为给我返回来的那个音频地址没有后缀
导致使用官方示例无法播放
被迫使用第一种方式

官方地址：https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext

支持格式

| 格式 | iOS  | Android |
| ---- | ---- | ---- |
| flac | x    | √    |
| m4a  | √    | √    |
| ogg  | x    | √    |
| ape  | x    | √    |
| amr  | x    | √    |
| wma  | x    | √    |
| wav  | √    | √    |
| mp3  | √    | √    |
| mp4  | x    | √    |
| aac  | √    | √    |
| aiff | √    | x    |
| caf  | √    | x    |