vue-audio-player 是一个 Vue.js 的音频播放器组件。以下是如何使用 vue-audio-player 并进行简单的播放器改造的示例：
- 安装
vue-audio-player：
npm install vue-audio-player --save- 在 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>- 进行播放器改造，例如添加播放列表、进度条控制等功能：
<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 可能不支持所有的浏览器，因此在使用前请检查兼容性。