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


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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
layui 解决form表单点击无反应的问题
Oct 25 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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
python实现人脸识别代码
2017/11/08 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
如何写出好的Java代码
2014/04/25 面试题
教师业务学习制度
2014/01/25 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
生日宴会主持词
2014/03/20 职场文书
医德医风演讲稿
2014/05/20 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
政风行风评议心得体会
2014/10/21 职场文书
大学感恩节活动总结
2015/05/05 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书