类似平常微信语音聊天的效果…

根据开发的需求，先理清一下思路，点击语音播放与暂停/停止，切换下一个语音等；
小程序对于audio的组件的一些api方法已经不支持了，详情可以参看：微信小程序audio组件文档

嗯嗯，这下子，该怎么办呢？
就如上面提到，小程序1.60版本后，给开发者提供了这个wx.createInnerAudioContext()api…具体使用可以看文档；

“自行测试的时候请使用的正规的音频资源，（部分手机）无法识别非正规的音频哦~”

好的，现在该上代码了！

-wxml结构：

<block wx:for="{{audioArr}}" wx:key="content" wx:for-item="v" wx:for-index="key">  <view class='output-audio'>      <!-- 默认状态 未播放 -->    <view class='audio' wx:if="{{!v.bl}}" bindtap='audioPlay' data-key="{{key}}" data-id="{{v.id}}" data-bl="{{v.bl}}">      <image class='ico' src='{{imgsUrl}}/yuyin-ico.png' />      <label class='time'>{{v.time}}</label>    </view>    <!-- 当前正在播放状态 -->    <view class='audio' wx:if="{{v.bl}}" bindtap='audioStop' data-key="{{key}}"  data-id="{{v.id}}" data-bl="{{v.bl}}">      <image class='ico' src='{{imgsUrl}}/yuyin-gif.gif' />      <label class='time'>{{v.time}}</label>    </view>  </view></block>

js方法：

// pages/audio/audio.jsconst app = getApp();//创建audio控件const myaudio = wx.createInnerAudioContext(); Page({  /**   * 页面的初始数据   */  data: {    imgsUrl:'../images', //图片路径    //音频列表（音频地址src是临时地址，自行找音频资源测试哦...）    audioArr: [      {        id: '1001',        src: 'https://m10.music.126.net/20191120180520/bc6a73f966b47b8ac6995d60ff8fa2d9/ymusic/0dd9/d28b/e089/fcbab41f4900212553c5b610c617da2a.mp3',        time: '30s',        bl: false      },      {        id: '1002',        src: 'https://m10.music.126.net/20191120180558/848d69bdaef62ca6a27d69a93445ac63/ymusic/525e/510b/020e/e47dd55bdcfaddfef0475d64d4829b08.mp3',        time: '50s',        bl: false      },    ],    audKey:'',  //当前选中的音频key  },  //音频播放    audioPlay(e) {    var that = this,      id = e.currentTarget.dataset.id,      key = e.currentTarget.dataset.key,      audioArr = that.data.audioArr;      //设置状态    audioArr.forEach((v, i, array) => {      v.bl = false;      if (i == key) {        v.bl = true;      }    })    that.setData({      audioArr: audioArr,      audKey: key,    })    myaudio.autoplay = true;    var audKey = that.data.audKey,        vidSrc = audioArr[audKey].src;    myaudio.src = vidSrc;        myaudio.play();    //开始监听    myaudio.onPlay(() => {      console.log('开始播放');    })    //结束监听    myaudio.onEnded(() => {      console.log('自动播放完毕');      audioArr[key].bl = false;      that.setData({        audioArr: audioArr,      })    })    //错误回调    myaudio.onError((err) => {      console.log(err);       audioArr[key].bl = false;      that.setData({        audioArr: audioArr,      })      return    })  },  // 音频停止  audioStop(e){    var that = this,      key = e.currentTarget.dataset.key,      audioArr = that.data.audioArr;    //设置状态    audioArr.forEach((v, i, array) => {      v.bl = false;    })    that.setData({      audioArr: audioArr    })    myaudio.stop();    //停止监听    myaudio.onStop(() => {      console.log('停止播放');    })  }, })

如有什么错误或优化的地方，可以提出来，大家一起学习研究…
完整代码可访问本人github: https://github.com/xiexikang/xcx-audio-play

其他案例：
[js仿淘宝收货地址列表，设置默认地址]
[微信小程序上传多张图片-视频，预览图片]
[微信小程序用canvas生成分享图片]