⼩程序进度条样式_⼩程序⾃定义⾳乐进度条的实例
代码
需求：显⽰⾳乐播放按钮、可⼿动拖拽进度条；页⾯中含多个⾳乐，播放当前⾳乐时暂停其他⾳乐播放。
⼩程序⾃带标签 audio
⼩程序⾃带的audio标签含固定的样式，且有最⼩尺⼨。⽬前项⽬也不含name和author字段，所以放弃audio标签。
实现效果图
初始化⾳乐数据
{{currentProcess}}
{{totalProcess}}
src: _this.data.questionObj.audio,
currentProcess: '--:--',//显⽰ 将currentProcessNum处理成时间形式展⽰
currentProcessNum: 0,//赋值
totalProcess: '--:--',
totalProcessNum: 1,
seek: -1,
imgUrl: '../../images/play.png',
canSlider: false //是否可以滑动，防⽌加载⾳乐时 ⽤户滑动进度条
点击播放按钮触发事件
说明：
·因页⾯中⾳乐数量较多，所以只有当⽤户点击播放，再去加载audio⽂件。
·wx.getBackgroundAudioManager()对象，同⼀时间只会播放⼀个audio⽂件。当重新赋值src时，会切换⽂件。
·利⽤onTimeUpdate⽅法实时更新播放进度。
·onEnded⽅法处理audio播放完毕后的数据重新初始化事件。
·变量clickPlayAudioFunctionIsRuning⽤来防⽌⽤户连续点击按钮。
const _this = this;
const _data = _this.data;
//防⽌⽤户点击播放按钮太快
if (_data.clickPlayAudioFunctionIsRuning){
return ;
}
_this.setData({
clickPlayAudioFunctionIsRuning: true
var _obj = _this.data.audioListObj;
const audioId = $this.currentTarget.dataset.audioid;
var backgroundAudioManager = wx.getBackgroundAudioManager();
if (_this.data.audioListObj[audioId].imgUrl == '../../images/play.png'){
console.log('转换⾄播放状态')
//切换所有播放按钮为暂停状态
for (var j in _this.data.audioListObj) {
if (j && _this.data.audioListObj[j]) {
_this.data.audioListObj[j].imgUrl = '../../images/play.png';
}
}
_this.setData({
audioListObj: _this.data.audioListObj,
})
//暂停正在播放⾳乐
wx.stopBackgroundAudio();
_obj[audioId].imgUrl = '../../images/paused.png';
backgroundAudioManager.title = '测试';
//设置⾳乐开始时间
if (_this.data.audioListObj[audioId].currentProcessNum != 0){
backgroundAudioManager.startTime = _this.data.audioListObj[audioId].currentProcessNum; }
backgroundAudioManager.src = _this.data.audioListObj[audioId].src;
_obj[audioId].canSlider = true;
backgroundAudioManager.play();
// 背景⾳频⾃然播放结束事件
var _obj = _this.data.audioListObj;
_obj[audioId].imgUrl = '../../images/play.png';
_obj[audioId].currentProcess = 0;
_obj[audioId].currentProcessNum = 0;
_this.setData({
audioListObj: _obj
})
/
/背景⾳频播放进度更新事件
_obj = _this.data.audioListObj;
//设置总时长
if (_obj[audioId] && _obj[audioId].totalProcess && (_obj[audioId].totalProcess == '--:--' || _obj[audioId].totalProcess == '00:00')) {
console.log(_this.formatTime(backgroundAudioManager.duration))
_obj[audioId].totalProcess = _this.formatTime(backgroundAudioManager.duration);
_obj[audioId].totalProcessNum = backgroundAudioManager.duration;
_this.setData({
audioListObj: _obj
})
}
if (!_this.data.isMovingSlider) {
//更新进度
_obj[audioId].currentProcess = _this.formatTime(backgroundAudioManager.currentTime);
_obj[audioId].currentProcessNum = backgroundAudioManager.currentTime;
_this.setData({
audioListObj: _obj
})
}
})
} else if (_this.data.audioListObj[audioId].imgUrl == '../../images/paused.png'){
console.log('转换⾄暂停状态')
_obj[audioId].imgUrl = '../../images/play.png'
wx.pauseBackgroundAudio();
代码转换
backgroundAudioManager.pause();
}
_this.setData({
audioListObj: _obj,
clickPlayAudioFunctionIsRuning: false
})
const _this = this;
const _data = _this.data;
const _obj = _this.data.audioListObj;
const position = $this.detail.value;
const audioId = $this.currentTarget.dataset.audioid;
var backgroundAudioManager = app.globalData.bgAudioListManager;
_obj[audioId].currentProcess = _this.formatTime(position);
_obj[audioId].currentProcessNum = position;
//如果正在播放
if (_obj[audioId].imgUrl == '../../images/paused.png'){
_obj[audioId].seek = position;
if (_obj[audioId].seek != -1) {
wx.seekBackgroundAudio({
position: Math.floor(position),
})
_obj[audioId].seek = -1;
}
}
_this.setData({
audioListObj: _obj
})
开始滑动触发事件
this.setData({
isMovingSlider: true
});
结束滑动触发事件
this.setData({
isMovingSlider: false
});
总结
以上所述是⼩编给⼤家介绍的⼩程序⾃定义⾳乐进度条的实例代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对脚本之家⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。