vue-audio-player使用和播放器改造

vue-audio-player 是一个 Vue.js 的音频播放器组件。以下是如何使用 vue-audio-player 并进行简单的播放器改造的示例：

1. 安装 vue-audio-player：

npm install vue-audio-player --save

2. 在 Vue 组件中引入并注册 vue-audio-player：

<template>
  <div>
    <audio-player :audio-url="audioUrl" />
  </div>
</template>
 
<script>
import { AudioPlayer } from 'vue-audio-player'
 
export default {
  components: {
    AudioPlayer
  },
  data() {
    return {
      audioUrl: 'path_to_your_audio_file.mp3'
    }
  }
}
</script>

3. 进行播放器改造，例如添加播放列表、进度条控制等功能：

<template>
  <div>
    <audio-player
      :audio-url="currentTrackUrl"
      :playlist="playlist"
      @playlist-change="handlePlaylistChange"
      @time-update="handleTimeUpdate"
    />
  </div>
</template>
 
<script>
import { AudioPlayer } from 'vue-audio-player'
 
export default {
  components: {
    AudioPlayer
  },
  data() {
    return {
      currentTrackUrl: 'path_to_your_audio_file.mp3',
      playlist: [
        { url: 'path_to_your_audio_file1.mp3', title: 'Track 1' },
        { url: 'path_to_your_audio_file2.mp3', title: 'Track 2' }
      ],
      currentTrackIndex: 0
    }
  },
  methods: {
    handlePlaylistChange(newIndex) {
      this.currentTrackIndex = newIndex;
      this.currentTrackUrl = this.playlist[newIndex].url;
    },
    handleTimeUpdate(currentTime, duration) {
      // 处理时间更新，例如更新进度条等
    }
  }
}
</script>

在这个改造后的播放器中，我们添加了播放列表 playlist 和两个方法 handlePlaylistChange 和 handleTimeUpdate。当播放列表的歌曲改变时，handlePlaylistChange 会更新当前播放的歌曲 URL，以及当前歌曲的索引 currentTrackIndex。handleTimeUpdate 可以用来更新播放进度等信息。

注意：vue-audio-player 可能不支持所有的浏览器，因此在使用前请检查兼容性。