微信小程序实现类似微信点击语音播放效果

本文实例为大家分享了微信小程序类似平常微信语音聊天的效果，不会互相干扰播放状态，供大家参考，具体内容如下

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

嗯嗯，这下子，该怎么办呢？

就如上面提到，小程序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==false } } ' bind tap=' audio play ' data-key=' { { key } } ' data-id=' { { v . id } } ' data-bl=' { { v . bl } } ' image class=' ico ' src=' https://xcx。全5分。com/Public/xcx-hitui/image/imgs-jyh/余音-ico.png'/label class='-当前正在播放状态-view class=' audio ' wx : if=' { { v . bl==true } } ' bind tap=' audio stop ' data-key=' { { key } } ' data-id=' { { v . id } } ' data-bl=' { { v . bl } } ' image class=' ico ' src=' https://xcx。全5分。com/Public/xcx-hitui/image/imgs-jyh/余音-gif.gif'/label class='样式：

第{背景： # f0f 0；}.输出-音频{ width : 150 rpxmargin : 30 rpx }。输出-音频。音频{ padd : 20 rpx border-radius : 10 rpx；背景-color : # fff；border: 1px实心# f0f 0；飞越：隐藏；}.输出-音频。音频ico { width : 26 rpx h8 : 30 rpx向左浮动：}.输出-音频。音频。时间{ float:右；font-size : 24 rpx}-js方法：

//pages/audio/audio.js//创建声音的控件const我的音频=wx。createinneraudiocontext()；页面({ /** *页面的初始数据*/data: { //音频列表audio arr :[{ id : ' 000 }，src : ' https://s 320。夏蜜。net/928/19928/1882512413/1772277226 _ 1513175794617。MP3？ccode=xiami _ web _ web expire=86400 duration=182 psid=485902 a 766977 ecaae 347 a4 cc 851 E8 daups _ client _ netip=113。70 .219 .174 ups _ ts=1551680441 ups _ userid=0 utid=ljh 9 KF 0 um0ca q7fs HVAPRwvid=17722726 fn=1772222 code=xiami _ web _ web expire=86400 duration=181 sid=6320 a 01 db 73 a6 fdb 9632 f 5800 fc 93 Fe 5 ups _ client _ netip=113。70 .219 .174 ups _ ts=1551680537 ups _ userid=0 utid=ljh 9 KF 0 um0ca q7fs HVAPRwvid=1810384080 fn=18100音频播放音频播放：函数(e) { var那=this，id=e.currentTarget.dataset.id，key=e . current target。数据集。key，audioArr=that.data.audioArr，vidSrc=audioArr[key]。srcmyaudio . src=vidsrcmyaudio . autoplay=true//切换显示状态for(var I=0；I AudioArr . lentigi){ AudioArr[I].bl=false} AudioArr[键]。bl=真；米亚迪奥。play()；//开始监听我的音频。OnPlay(()={那个。setdata({ AudioArr : AudioArr })})//结束监听我的音频。onended(()={ AudioArr[key]).bl=假声。setdata({ AudioArr : AudioArr，}) })，//音频停止音频停止：函数{ var那=this，key=e . currenttarget。数据集。键，音频arr=那个。数据。音频arr//切换显示状态for(var I=0；I AudioArr . lentigi){ AudioArr[I].bl=false} AudioArr[键]。bl=虚假音频。stop()；//停止监听我的音频。OnsTop(()={ AudioArr[key]).bl=假声。setdata({ AudioArr : AudioArr，}) }) //结束监听我的音频。onended(()={ AudioArr[key]).bl=假声。setdata({ audio rarr : audio rarr，}) }，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ },/** *生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *生命周期函数-监听页面隐藏*/onHide:函数(){ },/** *生命周期函数-监听页面卸载*/onUnload:函数(){ },/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ },/** *用户点击右上角分享*/onsharappmessage :函数(){ }})完整代码可访问本人开源代码库

为大家推荐现在关注度比较高的微信小程序教程一篇： 《微信小程序开发教程》 小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。