uniapp音乐播放器进度条

要实现进度条，需要以下步骤：

1. 在页面中引入uni-ui组件库，可以使用uni-progress组件来实现进度条。

2. 绑定uni-progress组件的value属性到当前歌曲的播放进度，可以使用uni.getBackgroundAudioManager()获取全局唯一的背景音频管理器，通过onTimeUpdate事件监听音乐播放进度的变化，在事件回调中更新进度条的value属性。

3. uni-progress组件提供了一个show-info属性，可以用来显示进度条的百分比，可以根据需要选择是否显示。

4. 如果需要拖动进度条来调整歌曲的播放进度，可以给uni-progress组件绑定一个change事件，当进度条的值发生变化时，在事件回调中调用背景音频管理器的seek方法来跳转到指定的播放时间。

示例代码如下：

<template>
  <view>
    <audio :src="musicUrl" @play="onPlay" @pause="onPause"></audio>
    <uni-progress :value="progress" show-info @change="onChange"></uni-progress>
  </view>
</template>
<script>
export default {
  data() {
    return {
      musicUrl: 'http://music.163.com/song/media/outer/url?id=1330348068.mp3',
      playing: false,
      duration: 0,
      currentTime: 0,
      progress: 0,
    }
  },
  mounted() {
    uni.getBackgroundAudioManager().onTimeUpdate(() => {
      const audio = uni.getBackgroundAudioManager()
      this.duration = audio.duration
      this.currentTime = audio.currentTime
      this.progress = this.currentTime / this.duration * 100
    })
  },
  methods: {
    onPlay() {
      this.playing = true
    },
    onPause() {
      this.playing = false
    },
    onChange(e) {
      const audio = uni.getBackgroundAudioManager()
      const position = e.detail.value / 100 * this.duration
      audio.seek(position)
    },
  }
}
</script>