小编给大家分享一下微信小程序怎么实现音频文件播放进度,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>问题描述
在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度、下面即用代码实现。
<强>解决方案
首先用。wxml与.wmss代码实现进度条的效果,再通过js文件控制进度条的进度和进度条的时间显示。
.wxml中(播放进度结构的代码):
在上述代码中,第五行用到了滑块组件,其值为播放进度play.percent。
.wxss中(播放进度样式的代码):
保存上述代码后,运行程序,效果如图:
onReady:,函数(){
this.audioCtx=wx.createInnerAudioContext ()
var =//播放失败检测
这只audioCtx.onError(函数(){
console.log(, ',播放失败:,& # 39;,+ that.audioCtx.src)
})//播放完成自动换下一曲
这只audioCtx.OnEnded(函数(){
that.next ()
})//自动更新播放进度
这只audioCtx.onPlay(函数(){
这只audioCtx.onTimeUpdate(函数(){
that.setData ({
”,play.duration & # 39;,:, formatTime (that.audioCtx.duration),
”,play.currrentTime & # 39;,:, formatTime (that.audioCtx只currrentTime),
”,play.percent & # 39;,:, that.audioCtx只currrentTime /that.audioCtx.duration * 100
})
})//默认选择第一曲
T his.setMusic (0)//格式化时间
function formatTime(时间){
var 分钟=Math.floor(时间/60)% 60;
var 其次=Math.floor(时间)% 60
return (minute<10 ?, & # 39;, 0, & # 39;, +分钟:分钟)+,& # 39;,:,& # 39;+
(second<10 ?, & # 39;, 0, & # 39;, +第二:秒)
}
})
}
上述代码中,通过调用audioCtx的alt="微信小程序怎么实现音频文件播放进度”>,
图2,,微信小程序进度条的滑动
在滑块组件上绑定bindchange事件,可以实现滑动进度条调节音视频文件播放进度,代码示例:
在。js文件中编写sliderChange函数获取用户当前选择的进度,将时间通过audioCtx对象的寻求()方法进行设置,代码示例:
以上是“微信小程序怎么实现音频文件播放进度”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
