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


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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
javascript function、指针及内置对象
Feb 19 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
javascript动态加载二
Aug 22 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
隐性调用php程序的方法
2015/06/13 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
解决python报错MemoryError的问题
2018/06/26 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
2015年事业单位工作总结
2015/04/27 职场文书
《失物招领》教学反思
2016/02/20 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
《三国志》赏析
2019/08/27 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
详解SQL报错盲注
2022/07/23 SQL Server