- 安装 vue-aplayer
npm install vue-aplayer --save
我们需要在main.js里面导入并引用
import vueAplayer from 'vue-aplayer'
Vue.use(vueAplayer)
- 引入、注册
- 在使用的vue文件里面引入他
import aplayer from "vue-aplayer"; components: { aplayer },
3.使用
<!--music:当前播放的音乐。 list:播放列表 :showlrc:是否显示歌词-->
<aplayer :music="musics[0]" :list="musics" :showlrc="true"></aplayer>
4。data数据
data() {
return {
detailForm: {
clickType: "",
title: "ajlgaljg",
},
// 音频列表
musics: [
{
title: "歌曲名称",
artist: "演唱者",
url: "歌曲文件的URL",
pic: "封面图片URL",
lrc: "歌词或歌词文件的URL",
},
{
title: "歌曲名称",
artist: "演唱者",
url: "歌曲文件的URL",
pic: "封面图片URL",
lrc: "歌词或歌词文件的URL",
}
],
};
},