E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

类似平常微信语音聊天的效果…根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等;小程序对于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生成分享图片]微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序,类似微信点击语音播放效果,不会互相干扰播放状态
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏