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


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为textarea添加maxlength属性的代码
Apr 07 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 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的ASP防火墙
2006/10/09 PHP
PHP+DBM的同学录程序(5)
2006/10/09 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
生产部厂长助理职位说明书
2014/03/03 职场文书
优秀食品类广告词
2014/03/19 职场文书
3分钟演讲稿
2014/04/30 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书