vue音乐播放器插件vue-aplayer的配置及其使用

在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>