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


Posted in Javascript onMarch 30, 2020

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

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

根据开发的需求,先理清一下思路,点击语音播放与暂停/停止,切换下一个语音等;
小程序对于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?ccode=xiami_web_web&expire=86400&duration=182&psid=485902a766977ecaae347a4cc851e8da&ups_client_netip=113.70.219.174&ups_ts=1551680441&ups_userid=0&utid=ljH9FKf0Um0CAQ7fs+HVAPRw&vid=1772277226&fn=1772277226_1513175794617.mp3&vkey=Bac0e9fde3983f090cef0a37e1cb73ef7',
 time: '30s',
 bl: false
 },
 {
 id: '001',
 src: 'https://s128.xiami.net/764/33764/2104642547/1810384080_1551417116476_5598.mp3?ccode=xiami_web_web&expire=86400&duration=181&psid=6320a01db73a6fdb9632f5800fc93fe5&ups_client_netip=113.70.219.174&ups_ts=1551680537&ups_userid=0&utid=ljH9FKf0Um0CAQ7fs+HVAPRw&vid=1810384080&fn=1810384080_1551417116476_5598.mp3&vkey=B54b264178201f6737c9bb5ff4bbce3d0',
 time: '50s',
 bl: false
 },
 ]
 },


 //音频播放 
 audioPlay: function (e) {
 var that = this,
 id = e.currentTarget.dataset.id,
 key = e.currentTarget.dataset.key,
 audioArr = that.data.audioArr,
 vidSrc = audioArr[key].src;
 myaudio.src = vidSrc;
 myaudio.autoplay = true;

 //切换显示状态
 for (var i = 0; i < audioArr.length; i++) {
 audioArr[i].bl = false;
 }
 audioArr[key].bl = true;
 
 myaudio.play();
 
 //开始监听
 myaudio.onPlay(() => {
 that.setData({
 audioArr: audioArr
 })
 })

 //结束监听
 myaudio.onEnded(() => {
 audioArr[key].bl = false;
 that.setData({
 audioArr: audioArr,
 })
 })

 },

 // 音频停止
 audioStop: function (e) {
 var that = this,
 key = e.currentTarget.dataset.key,
 audioArr = that.data.audioArr;
 //切换显示状态
 for (var i = 0; i < audioArr.length; i++) {
 audioArr[i].bl = false;
 }
 audioArr[key].bl = false;

 myaudio.stop();
 //停止监听
 myaudio.onStop(() => {
 audioArr[key].bl = false;
 that.setData({
 audioArr: audioArr,
 })
 })
 //结束监听
 myaudio.onEnded(() => {
 audioArr[key].bl = false;
 that.setData({
 audioArr: audioArr,
 })
 })
 }, 

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 
 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 
 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {
 
 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {
 
 }
})

完整代码可访问本人github

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
Javascript变量作用域详解
Dec 06 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
javascript实现画板功能
Apr 12 Javascript
微信小程序如何访问公众号文章
Jul 08 #Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 #Javascript
JavaScript实现的联动菜单特效示例
Jul 08 #Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 #Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 #Javascript
Vue实现拖放排序功能的实例代码
Jul 08 #Javascript
JavaScript中Dom操作实例详解
Jul 08 #Javascript
You might like
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
JavaScript 创建对象
2009/07/17 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
python基础教程之字典操作详解
2014/03/25 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
毕业生护理专业个人求职信范文
2014/01/04 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
简单租房协议书范本
2014/08/20 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
紧急通知
2015/04/17 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技