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

讯享网

根据开发的需求，先理清一下思路，点击语音播放与暂停/停止，切换下一个语音等；
小程序对于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/520/bc6a73f966b47b8ac6995d60ff8fa2d9/ymusic/0dd9/d28b/e089/fcbab41fc5b610c6****2a.mp3', time: '30s', bl: false }, { 
    id: '1002', src: 'https://m10.music.126.net/558/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相关的技术

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