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


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 js cookie的存储,获取和删除
Dec 29 Javascript
JavaScript 原型继承
Dec 26 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 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生成静态文件的多种方法分享
2012/07/17 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
flask入门之表单的实现
2018/07/18 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python3常用内置方法代码实例
2019/11/18 Python
python之生成多层json结构的实现
2020/02/27 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
秋季运动会加油稿200字
2014/01/11 职场文书
自主招生自荐信指南
2014/02/04 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
写给导师的自荐信
2015/03/06 职场文书
听证通知书
2015/04/24 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
人民币使用说明书
2019/04/17 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
Nginx跨域问题解析与解决
2022/08/05 Servers