微信小程序，类似微信点击语音播放效果，不会互相干扰播放状态

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

根据开发的需求，先理清一下思路，点击语音播放与暂停/停止，切换下一个语音等；
小程序对于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.js
const 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('停止播放');
    })

  }, 

})

方便的话，加个关注哦，博主会不定时更新写的前端案例哟…

如有什么错误或优化的地方，可以提出来，大家一起学习研究…

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

想学习vue可移步到：vue相关的技术

想学习小程序可移步到：小程序相关的技术