专栏首页算法与编程之美微信小程序|控制音频文件播放进度

微信小程序|控制音频文件播放进度

欢迎点击「算法与编程之美」↑关注我们!

本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

问题描述

在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现。

解决方案

首先用.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})})//默认选择第一曲 This.setMusic(0) //格式化时间function formatTime(time){ var minute=Math.floor(time/60)%60;var second=Math.floor(time)%60return (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/100that.audioCtx.seek(secend)},

END

实习编辑 | 王文星

责 编 | 李 娇

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:李娇

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-02-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android逆向调试|AndroidCrackMe挑战

    Android应用安全是当下流行的话题之一,网络上有很多论坛都会不定时发布某些APP破解的话题。目前为了维护Android应用的安全,各大厂商都会采用不同的加密...

    算法与编程之美
  • 计算机技术|我的第一个Flask程序

    Flask是目前十分流行的web框架,采用Python编程语言来实现相关功能。它被称为微框架(microframework),“微”并不是意味着把整个Web应用...

    算法与编程之美
  • JAVA|有关Java基础的笔记

    JRE(Java Runtime Environment):java的运行环境,包括jvm+java的核心类库。

    算法与编程之美
  • 大会 | IROS 2017,这是一场用实际数据说明机器和人相差多远的比赛!

    这是一场用实际数据说明,机器和人相差多远的比赛! ? IROS 2017无人机竞速表演环节,荷代尔夫特理工大学选手在尝试FPV操作 在AI科技评论看来,IROS...

    AI科技评论
  • Python利用pillow判断图片完整

    py3study
  • 原 3D拓扑自动布局之Web Worker

    HT_hightopo
  • 3D拓扑自动布局之Web Workers篇

    2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了,随着OpenGL特别是WebGL技术的普及,3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家,似...

    HT for Web
  • Java Map中常遇到的几个问题

    1.将Map转化成List Map接口提供了三种collection:key set,value set 和 key-value set,每一种都可以转成Lis...

    Java架构
  • ExtJS4中设置tabpanel的tab高度问题

      最近碰到个问题,在ExtJS中应该如何设置tabpanel的tab的高度?因为默认情况下,tab的高度太矮了,以至于tab的标题底部字都被截掉。设置了个ta...

    hbbliyong
  • 认真做事,是改变自己的最短路径

    国庆七天回来,很多人都会不太适应,放了七天人都不知道去哪了。休息七天后突然上班,不巧的话第一天就要上强度,肯定是会有点不舒服的。

    用户1634449

扫码关注云+社区

领取腾讯云代金券