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


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.ajax)
Nov 19 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 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
php-fpm配置详解
2014/02/12 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
Javascript计算时间差的函数分享
2011/07/04 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
js实现点击烟花特效
2020/10/14 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
python发布模块的步骤分享
2014/02/21 Python
用python删除java文件头上版权信息的方法
2014/07/31 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
幼儿园消防安全制度
2014/01/26 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
活动总结书怎么写
2015/05/11 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
在JavaScript中如何使用宏详解
2021/05/06 Javascript
Java死锁的排查
2022/05/11 Java/Android