微信小程序实现音频文件播放进度的实例代码


Posted in Javascript onMarch 02, 2020

问题描述

在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现。

解决方案

首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进度和进度条的时间显示。

.wxml中(播放进度结构的代码):

<view class="content-play-progress">
<text>{{play.currentTime}}</text>
<view>
<slider activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play.percent}}"/>
</view>
<text>{{play.duration}}</text>
</view>

在上述代码中,第五行用到了slider组件,其值为播放进度 play.percent。

.wxss中(播放进度样式的代码) :

.content-play-progress{
display: flex;
align-items: center;
margin: 0 35rpx;
font-size: 9pt;
text-align: center;
}
.content-play-progress>view{
flex: 1;
}

保存上述代码后,运行程序,效果如图:

微信小程序实现音频文件播放进度的实例代码 

图 1   微信小程序进度条的实现

.js中(控制进度条的进度和时间的代码) :

onReady: function(){
this.audioCtx=wx.createInnerAudioContext()
var that=this
//播放失败检测
this. audioCtx.onError(function(){
console.log( ‘ 播放失败: ' +that.audioCtx.src)
})
//播放完成自动换下一曲
this. audioCtx.OnEnded(function(){
that.next()
})
//自动更新播放进度
this. audioCtx.onPlay(function(){
this. audioCtx.onTimeUpdate(function(){
that.setData({
‘ play.duration ' : formatTime(that.audioCtx.duration),
‘ play.currrentTime ' : formatTime(that.audioCtx. currrentTime),
‘ play.percent ' : that.audioCtx. currrentTime /
that.audioCtx.duration*100
})
})
//默认选择第一曲
T his.setMusic(0)
//格式化时间
function formatTime(time){
var minute=Math.floor(time/60)%60;
var second=Math.floor(time)%60
return (minute<10? ' 0 ' +minute:minute)+ ' : ' +
(second<10? ' 0 ' +second:second)
}
})
}

上述代码中,通过调用audioCtx的 onTimeUpdate() 的方法,获取音视频状态信息,并通过 formatTime() 函数处理时间格式,最后渲染到页面实现实时更新效果,效果如图:

微信小程序实现音频文件播放进度的实例代码 

图 2   微信小程序进度条的滑动

在slider组件上绑定 bindchange 事件,可以实现滑动进度条调节音视频文件播放进度,代码示例 :

<slider bindchange= ” sliderChange ” activeColor= ” #d33a31 ” block-size= ” 12 ” backgroundColor= ” #dadada ” value= ” {{play.percent}} ” / >

在.js文件中编写 sliderChange 函数获取用户当前选择的进度,将时间通过 audioCtx 对象的 seek() 方法进行设置,代码示例:

sliderChange: function(e){
var second=e.detail.value* that.audioCtx.duration/100
that.audioCtx.seek(secend)
},

总结

到此这篇关于微信小程序实现音频文件播放进度的实例代码的文章就介绍到这了,更多相关小程序音频文件播放进度内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
jquery队列函数用法实例
Dec 16 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
写gulp遇到的ES6问题详解
Dec 03 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 #Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 #Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 #Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 #Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 #Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 #Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 #Javascript
You might like
php4与php5的区别小结(配置异同)
2011/12/20 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
python魔法方法-自定义序列详解
2016/07/21 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
python获取引用对象的个数方式
2019/12/20 Python
Python守护进程实现过程详解
2020/02/10 Python
python实现拼接图片
2020/03/23 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
创建精神文明单位实施方案
2014/03/08 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python