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

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

根据开发的需求，先理清一下思路，点击语音播放与暂停/停止，切换下一个语音等；
小程序对于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相关的技术

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

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

c语言微信小程序编程,微信小程序实现类似微信点击语音播放效果
本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等: 小程序对于aud ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
【微信小程序】微信小程序基础知识篇
开发文档小程序简介 | 微信开放文档 1.微信小程序的环境准备 1.1注册账号 1.2获取APPID 是开发者唯一的身份认证,应用要发布要上线必须提供APPID 1.3开发工具由于微信小程序自带开 ...
springboot 微信小程序对接微信支付功能(完整版)
微信小程序对接微信支付功能业务流程时序图 JAVA版 1. 项目架构 2. pom.xml配置文件 3. 小程序账号参数配置类 4.JAVA 通用代码 4.1 工具类 4.1.1 IdGen (id ...
微信小程序：微信商家券的领取
微信小程序:微信商家券的领取微信在去年推出了商家券,我前不久才接触,在制作领取程序的时候由于网上相关的资料很少,所以走了不少弯路. 主要问题这里可以注意到,微信券的领取需要传递三个参数,坑爹的是 ...
微信小程序开发-微信支付之免密支付（自动扣费）一小程序+java接口
微信小程序开发-微信支付之免密支付(自动扣费)一小程序+java接口链接: 点击进入
微信小程序与公众号区别PHP,微信小程序和微信公众号的区别是什么？
微信小程序和微信公众号的区别是什么? 2019-08-17 09:10 微信公众号和小程序都是基于微信平台来使用的,而微信自带的十几亿流量也是导流到小程序和公众号上的.越来越多的商家都在运营微信小程序 ...
微信小程序实现收货地址城市选择效果(添加收货地址)
先来张效果图这里主要是城市选择效果,请忽视其他,不要吐槽,谢谢接下来看一下代码吧 wxml  < ...

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

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

最新文章

热门文章