要求：显示音乐播放按钮，手动拖拽进度条；页面上有多首音乐，其他音乐在播放当前音乐时暂停。

小程序附带标签音频

小程序附带的音频标签有固定的样式和最小尺寸。目前项目不包含姓名和作者字段，因此音频标签被丢弃。

实现渲染

初始化音乐数据

text { { CurrentProcess } }/text slider bind change=' ' bind touch start=' ' bind touch end=' ' max=' { { TotalProcessNum } } ' min=' 0 ' value=' { { CurrentProcessNum } } ' disabled=' { { Canslider } } '/slider text { { TotalProcess } }/text image src=' http : { { AudioListObj[' q ' questobj . id]。imgUrl } } ' data-AudioId=' q { { questionObj . id } } ' bind tap=' ClickPlayAudio '/image！- clickPlayAudio播放按钮触发事件-src : _ this . data . question obj . audio，currentprocess3360'-:-'，//显示处理为时间形式的currentProcessNum，显示currentprocess num : 0 0，//分配totalprocessnum :'-:-'，totalprocessnum : 1，seek :-1，Imgurl: '././images/play.png '，can slider : false//可以滑动以防止用户在加载音乐时滑动进度条并单击播放按钮来触发事件

描述：

因为页面上有很多音乐，只有当用户点击播放时，才能加载音频文件。

wx.getBackgroundAudioManager()对象，同一时间只能播放一个音频文件。当src被重新分配时，文件被交换。

使用onTimeUpdate方法实时更新播放进度。

onEnded方法处理音频播放后的数据重新初始化事件。

变量clickplayaudiofunctionisrunning用于防止用户连续单击按钮。

const _ this=这个const _ data=_ this.data//防止用户点击播放按钮太快if(_ data。单击playaudionfunctionisrunning){ return；} _这个。setdata({ clickplayaudionfunctionisrunig 3360 true })var _ obj=_ this。数据。音频列表对象；const AudioID=$ this。当前目标。数据集。AudioIDvar背景音频管理器。getbackground audio manager()；if(_ this。数据。音频列表对象(音频标识).' imgUrl=='././images/play.png'){ console.log('转换至播放状态') //切换所有播放按钮为暂停状态for(var j in _ this。数据。audio listobj){ if(j _ this。数据。audio listobj[j]){ _ this。数据。音频列表[j].' imgUrl='././图像/播放。png '；} } _这个。setdata({ audio listobj : _ this。数据。audiolistobj，}) //暂停正在播放音乐wx。stop background audio()；_obj[audioId].' imgUrl='././images/挂起。png '；backgroundAudioManager.title='测试；//设置音乐开始时间if(_ this。数据。音频列表对象(音频标识).currentProcessNum！=0){背景音频管理器。开始时间=_ this。数据。音频列表[音频id].背景音频管理器。src=_ this。数据。音频列表.src_obj[audioId].canSlider=truebackground音频管理器。play()；//背景音频自然播放结束事件后台音频管理器。onended(function(){ var _ obj=_ this。数据。音频列表对象；_obj[audioId].' imgUrl='././图像/播放。png '；_obj[audioId].当前进程=0；_obj[audioId].currentProcessNum=0；_这个。setdata({ audio listobj : _ obj })})//背景音频播放进度更新事件后台音频管理器。ontimeupdate(函数（回调){ _ obj=_ this。数据。音频列表对象；//设置总时长if (_obj[audioId] _obj[audioId]).totalProcess (_obj[audioId]).totalProcess=='-:-' | | _ obj[AudioID].totalProcess==' 00:00 '){控制台。log(_ this。格式化时间(背景音频管理器。持续时间))_ obj[音频id].总进程=_ this。格式化时间(背景音频管理器。持续时间)；_obj[audioId].totalProcessNum=背景音频管理器。持续时间；_这个。setdata({ AudioListObj : _ obj })} if(！_this.data.isMovingSlider) { //更新进度_obj[audioId].当前进程=_ this。格式化时间(背景音频管理器。当前时间)；_obj[audioId].currentProcessNum=后台音频管理器。当前时间；_这个。setdata({ AudioListObj : _ obj })})else if(_ this。数据。音频列表对象[音频标识].' imgUrl=='././images/挂起。png '){控制台。日志('转换至暂停状态)_obj[audioId].' imgUrl='././图像/播放。png ' wx。pausedackgroundaudio()；后台音频管理器。pause()；} _这个。setdata({ audiolistobj : _ obj，clickplayaudionfunctionis running 3360 false })滑动进度条触发事件

const _ this=this const _ data=_ this . dataconst _ obj=_ this。数据。AudioListObj常量位置=$ this。细节。价值；const AudioID=$ this。当前目标。数据集。AudioIDvar后台音频管理器=app。全球数据。bgaudio列表管理器；_obj[audioId].当前进程=_ this。格式化时间(位置);_obj[audioId].currentProcessNum=位置；//如果正在播放if (_obj[audioId]).' imgUrl=='././images/挂起。png '){ _ obj[AudioID].seek=位置；if (_obj[audioId]).寻求！=-1){ wx。seekbackgroundaudio({ position : math。地板(位置)，}) _obj[audioId].seek=-1；} } _这个。setdata({ AudioListObj : _ obj })开始滑动触发事件

这个。setdata({ Ismovingslid : true })；结束滑动触发事件

这个。setdata({ Ismovingslid : false })；总结

以上所述是小编给大家介绍的微信小程序自定义音乐进度条的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！