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


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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
JS+CSS实现过渡特效
Jan 02 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
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP常用数组函数介绍
2014/07/28 PHP
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
Python的一些用法分享
2012/10/07 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Django实现内容缓存实例方法
2020/06/30 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
小学生成长感言
2014/01/30 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
爱心捐书倡议书
2015/04/27 职场文书