本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下
根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等;
小程序对于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==false}}" bindtap='audioPlay' data-key="{{key}}" data-id="{{v.id}}" data-bl="{{v.bl}}"> <image class='ico' src='https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/yuyin-ico.png' /> <label class='time'>{{v.time}}</label> </view> <!-- 当前正在播放状态 --> <view class='audio' wx:if="{{v.bl==true}}" bindtap='audioStop' data-key="{{key}}" data-id="{{v.id}}" data-bl="{{v.bl}}"> <image class='ico' src='https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/yuyin-gif.gif' /> <label class='time'>{{v.time}}</label> </view> </view> </block>
-wxss样式:
page{ background: #f0f0f0;} .output-audio{ width: 150rpx; margin: 30rpx; } .output-audio .audio{ padding: 20rpx; border-radius: 10rpx;background-color: #fff; border: 1px solid #f0f0f0; overflow: hidden; } .output-audio .audio .ico{ width: 26rpx; height: 30rpx; float: left;} .output-audio .audio .time{ float: right; font-size: 24rpx;}
-js方法:
// pages/audio/audio.js //创建audio控件 const myaudio = wx.createInnerAudioContext(); Page({ /** * 页面的初始数据 */ data: { //音频列表 audioArr: [ { id: '000', src: 'https://s320.xiami.net/928/19928/1882512413/1772277226_1513175794617.mp3"external nofollow" target="_blank" href="https://github.com/xiexikang/xcx-audio-play">github为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
最新资源
- 韩红2010-擦肩而过[央金玛][WAV+CUE]
- RiccardoTesi-UnballoLiscio,Vol.II(2024)[24-4
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】
- 群星.1991-不一样的感觉REMIX【宝丽金】【WAV+C
- 银霞.1983-《你那好冷的小手》珍藏纪念版[WAV分