微信小程序：自定义音乐进度条

vonvon_chris

于 2017-11-14 18:31:52 发布

阅读量1.7w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：小程序 Web 文章标签：微信 audio

本文链接：https://blog.youkuaiyun.com/Akony/article/details/78533553

该博客介绍了如何在微信小程序中实现自定义音乐进度条功能，包括初始化音乐数据、点击播放按钮事件、滑动进度条事件处理，以及如何在多音乐场景下确保唯一播放。通过wx.getBackgroundAudioManager()进行音频管理，并使用onTimeUpdate和onEnded方法来更新和处理播放状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：显示音乐播放按钮、可手动拖拽进度条；页面中含多个音乐，播放当前音乐时暂停其他音乐播放。

小程序自带标签 audio
小程序自带的audio标签含固定的样式，且有最小尺寸。目前项目也不含name和author字段，所以放弃audio标签。

实现效果图
这里写图片描述

初始化音乐数据

<text>{
   
   {
   
   currentProcess}}</text>
<slider bindchange="" bindtouchstart="" bindtouchend="" max="{
   
   {
   
   totalProcessNum}}" min="0" value="{
   
   {
   
   currentProcessNum}}" disabled="{
   
   {
   
   canSlider}}"></slider>
<text>{
   
   {
   
   totalProces