请用uniapp写一个音乐播放器 使用 slider组件控制audio组件的播放进度(播放)（暂停）（实时显示播放时长）（实时显示进度时长）

<template>
  <view class="container">
    <audio :src="currentMusic.url" :id="audioId" :currentTime="currentTime" @timeupdate="updateCurrentTime"></audio>
   
    <view class="music-list">
      <view
        class="music-item"
        v-for="(music, index) in musicList"
        :key="index"
        :class="{ active: currentMusicIndex === index }"
        @click="playMusic(index)"
      >
        <text :style="{ color: currentMusicIndex === index ? 'blue' : 'black' }">{{ music.name }}</text>
      </view>
    </view>
    <button class="play-btn" @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    <text class="current-time">{{ formatTime(currentTime) }}</text>
	<text class="total-time">{{ formatTime(totalTime) }}</text>
	<slider class="slider" :value="currentTime" :max="totalTime" @change="seekTo"></slider>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioId: 'music',
      musicList: [
        { name: '音乐1', url: 'https://atand.oss-cn-beijing.aliyuncs.com/%E9%9F%B3%E4%B9%90/%E7%A8%8B%E5%93%8D%20-%20%E5%8F%AF%E8%83%BD.mp3'},
        { name: '音乐2', url: 'https://atand.oss-cn-beijing.aliyuncs.com/%E9%9F%B3%E4%B9%90/VIVI%20-%20%E5%BC%80%E5%BF%83%E5%BE%80%E5%89%8D%E9%A3%9E.mp3'},
        { name: '音乐3', url: 'https://atand.oss-cn-beijing.aliyuncs.com/%E9%9F%B3%E4%B9%90/%E4%BC%AF%E7%88%B5Johnny%E3%80%81%E5%94%90%E4%BC%AF%E8%99%8EAnnie%20-%20%E8%A5%BF%E5%8E%A2%E5%AF%BB%E4%BB%96.mp3'},
        { name: '音乐4', url: 'https://atand.oss-cn-beijing.aliyuncs.com/%E9%9F%B3%E4%B9%90/%E5%86%AC%E5%A4%A9%E7%9A%84%E7%A7%98%E5%AF%86.mp3'},
        { name: '音乐5', url: 'https://atand.oss-cn-beijing.aliyuncs.com/%E9%9F%B3%E4%B9%90/%E5%BB%96%E4%BF%8A%E6%B6%9B%20-%20%E8%BF%87%E5%AD%A3%E7%9F%AD%E8%A2%96.mp3'}
      ],
      currentMusicIndex: -1,
      currentMusic: {},
      isPlaying: false,
      currentTime: 0,
	  totalTime:0
    };
  },
  methods: {
    playMusic(index) {
      if (this.currentMusicIndex === index) {
        this.togglePlay();
        return;
      }
      this.currentMusicIndex = index;
      this.currentMusic = this.musicList[index];
      this.audioContext.src = this.currentMusic.url;
      this.audioContext.play();
      this.isPlaying = true;
    },
    togglePlay() {
      if (this.isPlaying) {
        this.audioContext.pause();
      } else {
        this.audioContext.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    updateCurrentTime() {
      this.currentTime = this.audioContext.currentTime;
    },
    seekTo(event) {
      const seekTime = event.mp.detail.value;
      this.audioContext.seek(seekTime);
    },
    formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
  },
  mounted() {
    this.audioContext = uni.createInnerAudioContext(this.audioId);
    this.audioContext.onTimeUpdate(this.updateCurrentTime);
	this.audioContext.onCanplay(() => {
	  this.totalTime = this.audioContext.duration;
	});
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.slider {
  width: 80%;
  margin-bottom: 20px;
}

.music-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

.music-item {
  margin-bottom: 10px;
  cursor: pointer;
}

.active {
  color: blue;
}

.play-btn {
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 4px;
}

.current-time {
  margin-top: 10px;
}
</style>