显示歌曲进度条（使用moment.js第三方库格式化时间），以及歌曲播放完毕自动播放下一首

原创已于 2022-07-17 09:46:15 修改 · 832 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-07-15 21:12:10 首次发布

微信小程序专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何通过音乐ID获取歌曲时长，使用moment.js格式化时间，实现背景音乐播放进度监听与进度条动态变化。同时，涵盖歌曲结束后的自动播放逻辑和关键组件的代码示例。

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

1）根据音乐id,在音乐详情里面获取歌曲总时长durationTime
2) 使用第三方库格式化时间（moment.js）

安装

npm install moment

开发工具——>工具——>构建npm
看moment.js官方文档有使用方法，使用前需要先引入

import moment from 'moment'

使用举例：

let durationTime=moment(songData.songs[0].dt).format('mm:ss')

3）获取当前播放时长（实时更新播放时长），需要使用到背景音乐监听的一个API（onTimeUpdate）监听背景音频播放进度更新事件

// 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(()=>{
      // 格式化实时播放时长
      let currentTime=moment(this.backgroundAudioManager.currentTime*1000).format('mm:ss')
      this.setData({
        currentTime
      })
    })

4）设计一个结构让进度条的长度跟随歌曲播放进度而改变
songDetail.wxml

<!-- 总进度条区域 -->
    <view class="barControl">
      <!-- 实时进度条 -->
      <view class="audio-currentTime-bar" style="width: {{currentWidth+'rpx'}};">
        <!-- 小圆球 -->
        <view class="audioCircle">
        </view>
      </view>
    </view>

对应样式songDetail.wxss

.barControl{
  position: relative;
  width: 450rpx;
  height: 4rpx;
  background: rgba(0, 0, 0, 0.4);
  margin: auto;
}
/* 实时进度条 */
.audio-currentTime-bar{
  position: absolute;
  left: 0;
  top: 0;
  height: 4rpx;
  width: 0rpx;
  background: red;
}
.audioCircle{
  position: absolute;
  right: -12rpx;
  top: -4rpx;
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #fff;
}

搭建好结构和样式之后，可以写相应的代码，动态的展示播放进度了，实时播放进度条的长度是动态的，它的长度就等于当前播放时长和总时长的比再乘以总长度，

 // 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(()=>{
      // 格式化实时播放时长
      let currentTime=moment(this.backgroundAudioManager.currentTime*1000).format('mm:ss')
      let currentWidth=this.backgroundAudioManager.currentTime/this.backgroundAudioManager.duration*450
      this.setData({
        currentTime,
        currentWidth
      })
    })

6）进行优化，如果歌曲播放结束，用onEnded监听应该自动播放下一首，自动播放(和点击切换下一首的逻辑差不多，不过点击的时候要判断类型，这个自动切换下一首类型就是next,给recommendSong发布消息就可以)，同时需要初始化数据

// 监听歌曲自然播放结束
    this.backgroundAudioManager.onEnded(()=>{
      // 自动切换到下一首音乐，并且自动播放(和点击切换下一首的逻辑差不多，不过点击的时候要判断类型，这个自动切换下一首类型就是next,给recommendSong发布消息就可以)
      PubSub.publish('switchType','next')
      this.setData({
        currentTime:'00:00', //实时播放时长
        durationTime:'00:00', //总时长
        currentWidth:'0', //实时进度条宽度
      })
    })
    // 监