控制音频文件播放进度

问题描述

微信小程序中常用控制文件播放的滑块，音频播放进度可以通过滑块控制，下面用代码实现。

解决办法

首先利用实现进度条的效果。wxml和。控件控制进度条的进度和进度条的时间显示。js文件。wxml(播放进度结构的代码):

viewclass='内容-播放-进度'

文本{ { play . Currettime } }/文本

视角

slideractrivecolor=' # d33a 31 ' block-size=' 12 ' background color=' # dada ' value=' { { play . percent } } '/

/view

文本{ { play . duration } }/文本

/view

在上面的代码中，第五行使用滑块组件，其值为play.percent。wxss(播放进度风格代码):内容播放进度{

display:flex

align-items : center；

margin:035rpx

font-size :9 pt；

文本对齐：居中；

}。内容-播放-进度视图{

flex:1

}

保存上述代码后，运行程序，效果如下：

图1微信小程序进度条的实现。js(控制进度条进度和时间的代码):

onReady:函数(){ 0

this . audioctx=wx . createinneraudiocontext()

变量=这个

//播放失败检测

这个。audioctx . onerror(function(){ 0

Console.log('未能播放':that.audioCtx.src)

})

//播放后自动换下一首歌。

这个。audioCtx。OnEnded(函数(){ 0

下一个

})

//自动更新播放进度

这个。audioCtx.onPlay(函数(){ 0

这个。audioctx . ontimeupdate(function(){ 0

that . setdata({ 0

play.duration': formatTime，

play . currenttime ' : format time(即. that.audioCtx. currrentTime)，

play . percent ' : that . audioctx . currenttime/

that.audioCtx.duration*100

})

})

//默认选择第一首歌

This.setMusic(0)

//格式化时间

函数formatTime(时间){ 0

var分钟=math . floor(time/60)`；

var second=Math.floor(time)`

返回(10分钟？0 '分钟：分钟)' : '

(第10秒？0 '秒：秒)

}

})

}

在上面的代码中，音视频状态信息是通过调用audioCtx的onTimeUpdate()方法获取的，时间格式由formatTime()函数处理，最后渲染到页面上实现实时更新效果。效果如下：

图2微信小程序进度条滑动

Bindchange事件绑定到滑块组件，可以实现滑动进度条来调整音视频文件的播放进度，代码示例：

slider bind change=" slider change " activeColor=" # d33a 31 " block-size=" 12 " background color=" # dada da " value=" { { play . percent } } "/

在中编写sliderChange函数。js文件获取用户当前选择的进度，并通过audioCtx对象的seek()方法设置时间。代码示例：

sliderChange:函数(e){ 0

var second=e . detail . value * that.audioCtx.duration/100

that.audioCtx.seek(secend)

},