版权声明：你可以转载,但要标明出处 https://blog.csdn.net/qq_41605091/article/details/80647269
.wxml:
<!-- 播放区域 -->
<
view
class=
'play-area'>
<!-- <view class='play-line'> -->
<
view
class=
'play-line-time1'>{{now_time?now_time:'00:00'}}
</
view
>
<
slider
class=
'play-line-slider'
bindchange=
"listenerSlider"
block-size=
"15"
value=
"{{slider_value}}"
activeColor=
"#1a94e1"
backgroundColor=
"#d5d5d5"
/
>
<
view
class=
'play-line-time2'>{{AudioDetail.audio_length}}
</
view
>
<!-- </view> -->
</
view
>
.js:
const innerAudioContext = wx.createInnerAudioContext();
//创建音频容器
Page({
/**
* 页面的初始数据
*/
data: {
slider_value:
0//设置初始滑块位置为0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:
function (options) {
this.setData({
slider_value:
0,
now_time:
0
});
innerAudioContext.seek(
0);//设置音频初始位置为0
this.getAudioDetail();//获取一品
this.audioListen();
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload:
function () {
innerAudioContext.pause();//退出页面时，暂停音频
},
/**
* 监听slider
*/
listenerSlider:
function (e) {
//获取滑动后的值
console.log(e.detail.value);
var per = e.detail.value /
100;
var long = per *
this.data.audio_length;
this.setData({
now_time: util.formatSeconds2(long)
})
innerAudioContext.seek(long);//通过滑块控制音频进度
},
/**
*
获取音频详情
*/
getAudioDetail:
function () {
var that =
this;
util.ajax({
url: util.getApiUrl(
"xiaoe/getAudioDetail"),
data: {
resource_id: that.data.res_id
}
},
function (data) {
innerAudioContext.src = data.audio_url;
innerAudioContext.autoplay =
true;
innerAudioContext.play();
that.setData({
audio_length: data.audio_length
//设置音频总时长
});
data.audio_length = util.formatSeconds2(data.audio_length);
that.setData({
AudioDetail: data
});
},
this);
},
/**
* 监控音频进度
*/
audioListen:
function () {
var that =
this;
innerAudioContext.onPlay(() => {
console.log(
'开始播放')
})
//必须先执行onPlay方法，才能继续执行onTimeUpdate方法
innerAudioContext.onTimeUpdate(
function (res) {
var per = (innerAudioContext.currentTime / innerAudioContext.duration) * 100;
//获取当前播放时间所对应的slider位置
that.setData({
slider_value: per,
//设置slider滑块所在位置
now_time: util.formatSeconds2(innerAudioContext.currentTime)//获得的值是秒，需要转换成分钟
})
})
}
})