在vue的官网上看到vue-aplayer这个音乐播放器的插件,由于个人有比较喜欢音乐,所以就拿过来玩一玩,感觉还是比较实用的,界面美观。
首先,我们先安装 npm install vue-aplayer --save,之后在组件中引入 import VueAplayer from 'vue-aplayer',下面就是源码,可供参考:
<template>
<div>
<div style="padding:10px 0;">
<aplayer autoplay :music="musicList">
</aplayer>
</div>
</div>
</template>
<script>
import aplayer from "vue-aplayer";
export default {
name: "Aplayer",
props: ["pdfurl"],
components: {
//别忘了引入组件
aplayer: aplayer
},
data() {
return {
musicList: {
title: "youkao100",
author: "youkao100",
url: 'http://localhost:1122/static/ceshi.mp3',
pic: "",
lrc: "[00:00.00]lrc here\n[00:01.00]aplayer"
}
};
},
computed: {
url() {
return this.pdfurl;
}
},
mounted() {
this.musicList = {
title: "youkao100",
author: "youkao100",
url: this.url,
pic: "",
lrc: "[00:00.00]lrc here\n[00:01.00]aplayer"
};
}
};
</script>
<style lang="scss" scoped type="text/css">
</style>