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


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 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
来自qq的javascript面试题
Jul 24 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
js轮播图之旋转木马效果
Oct 13 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
php过滤敏感词的示例
2014/03/31 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
php四种定界符详解
2017/02/16 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
js使用心得分享
2015/01/13 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python实现的快速排序算法详解
2017/08/01 Python
python读取几个G的csv文件方法
2019/01/07 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
艺术教育实施方案
2014/05/03 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
退休欢送会主持词
2015/07/01 职场文书
vue 实现上传组件
2021/05/31 Vue.js
python+opencv实现视频抽帧示例代码
2021/06/11 Python