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


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 相关文章推荐
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
javascript实现时钟动画
Dec 03 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
不刷新网页就能链接新的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
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
28个JS验证函数收集
2010/03/02 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
微信小程序云开发之使用云数据库
2019/05/17 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python爬虫实现中英翻译词典
2019/06/25 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
如何对python的字典进行排序
2020/06/19 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
建设工程授权委托书
2014/09/22 职场文书
介绍长城的导游词
2015/01/30 职场文书
总账会计岗位职责
2015/04/02 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
python实现A*寻路算法
2021/06/13 Python
redis protocol通信协议及使用详解
2022/07/15 Redis