实例：一个简单的播放器效果。
实现的功能：
1点击播放按钮。音频开始播放。
2播放的同时，进度条在不停的更新走动
3点击暂停按钮，音频停止播放
4当音频播放完毕以后，进度条再次回到原点
5当拖滑动滑块以后，松开滑块，进度条继续走动，音频从滑块松开的位置播放，直至播放结束
html：
<!--进度条-->
<
view
class=
"progresswrap">
<
slider
class=
"drag"
step=
"10"
value=
"{{curTimeVal}}"
max=
"{{duration}}"
backgroundColor=
"#373636"
activeColor=
"#FF1744"
bindchange=
"slideBar"
/
>
</
view
>
<!--控制按钮-
->
<
view
class=
"btns">
<
view
bindtap=
'play'><
image
src=
"{{playSrc}}"></
image
></
view
>
<
view
bindtap=
'pause'><
image
src=
"{{pauseSrc}}"></
image
></
view
>
</
view
>
js
const innerAudioContext = wx.createInnerAudioContext();
Page({
duration:
0,
curTimeVal:
0,
})
onLoad:
function:(){
wx.request({
url: utils.baseUrl +
"/message/get?sessionID=" + sessionID +
"&id=" + id,
success:
function (res) {
var resData = res.data.data
var audioSrc =
"https://www.rujian.vip"+resData.resourceURL;
that.setData({
contResponseArr: resData,
audioSrc: audioSrc
})
innerAudioContext.src = audioSrc;
}
})
},
play:
function (e) {
var that=
this;
innerAudioContext.play();
innerAudioContext.onPlay((res) =>
that.updateTime(that)
}) //没有这个事件触发，无法执行updatatime
}
pause:
function(){
innerAudioContext.pause();
},
updateTime:
function(that){
innerAudioContext.onTimeUpdate((res) => {
//更新时把当前的值给slide组件里的value值。slide的滑块就能实现同步更新
console.log(
"duratio的值：", innerAudioContext.duration)
that.setData({
duration: innerAudioContext.duration.toFixed(
2) *
100,
curTimeVal: innerAudioContext.currentTime.toFixed(
2) *
100,
})
})
//播放到最后一秒
if (innerAudioContext.duration.toFixed(
2) - innerAudioContext.currentTime.toFixed(
2) <=
0) {
that.setStopState(that)
}
innerAudioContext.onEnded(() => {
that.setStopState(that)
})
},
//拖动滑块
slideBar:
function(e){
let that=
this;
var curval=e.detail.value; //
滑块拖动的当前值
innerAudioContext.seek(curval); //让滑块跳转至指定位置
innerAudioContext.onSeeked((res)=>{
this.updateTime(that) //注意这里要继续出发updataTime事件，
})
},
setStopState:
function(that){
that.setData({
curTimeVal:
0
})
innerAudioContext.stop()
}
效果如下：
