vue-aplayer 音乐播放，实现播放与音乐列表

最近现在个人博客上嵌入音乐播放，与是撸起袖子就干了起来，由于博客前端是基于Vue开发，所以在网上查了一下，说vue-aplayer使用起来不错，于是便用了起来，效果如下：

代码如下：

此代码可以直接使用，且里面音乐地址链接都是有效的

使用前提：安装vue-aplayer

npm install vue-aplayer –save

vue页面完整代码：

<template>
  <div>
    <div style="padding:10px 0;">
      <aplayer autoplay :music="{
          title: '剑心',
          artist: '张杰',
          src: 'http://m7.music.126.net/20200607161403/ed714b7dbaaee6f862184ff96da280bf/ymusic/3e70/4277/5715/abf7aaf8e92b13f339a59dfc6940499d.mp3',
          pic: 'https://p2.music.126.net/ixIs5kkukgNYMmeDsc35_g==/29686813955450.jpg'
      }" :list="musicList">
      </aplayer>
    </div>

  </div>
</template>

<script>
  import aplayer from "vue-aplayer";

  export default {
    name: "Aplayer",
    components: {
      //别忘了引入组件
      aplayer: aplayer
    },
    data() {
      return {
        musicList: [{
          title: '白羊',
          artist:'徐秉龙',
          src: "http://m8.music.126.net/20200607160502/d62b8d5dc9c90c93a151914be957a617/ymusic/25a2/4ff4/52fc/d664724d25de35a8d4e23c1b986c60b5.mp3",
          pic: 'https://p1.music.126.net/tczb_7II9KzSuLQsVt89Gw==/109951163049336667.jpg',
          },
          {
            title: '说谎',
            artist: '林宥嘉',
            src: "http://m7.music.126.net/20200607161953/af2e67e22c2407fea966c46769106159/ymusic/05ee/4458/4a12/e3ea4813e0c4abafe6c3d40b13cb9f65.mp3",
            pic: 'https://p2.music.126.net/mMZNB-jhYsw29K61QtopJA==/109951163187404137.jpg',
          },
          {
            title: '成都',
            artist: '赵雷',
            src: "http://m7.music.126.net/20200607162234/8629f14056f784879d33dedbab34bf03/ymusic/fa90/df9c/59f7/95c4a2802e0b9191ae1a048f127e53c5.mp3",
            pic: 'https://p1.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg'
          },
          {
            title: '陪你到底',
            artist: '许华升',
            src: "http://m7.music.126.net/20200607161155/1ddfddaa4d9a7c3100c3e7329ce8e3da/ymusic/540f/005e/065e/ce65b58fea742cac390e1499eb32db98.mp3",
            pic: 'https://p1.music.126.net/a7QkLGexMQGT2lF3mqcUdw==/109951163693319625.jpg',
          },
          {
            title: '广东爱情故事',
            artist: '雨神',
            src: "http://m7.music.126.net/20200607160858/6143003bbb9021f13678624978f9ba14/ymusic/c69c/aeed/2bd9/57487636f38ec8ef9355bf67d0741dfe.mp3",
            pic: 'https://p1.music.126.net/gjvguk9I-QwuyWFjQHM9SA==/109951163189947600.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "http://m8.music.126.net/20200607161716/e2266bad871c28351a3ce257061b3310/ymusic/5d63/5150/0851/5f226aac018cafc2cb248f7d28fbd5b4.mp3",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          }]
      };
    },
    computed: {

    }
  };
</script>

<style lang="scss" scoped type="text/css">
</style>

若有不懂的可以私信我，希望能帮到你…

然后我分享一个音乐api求情地址，希望也能帮助到你：

1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果

  2:歌曲url获取接口
    请求地址:https://autumnfish.cn/song/url
    请求方法:get
    请求参数:id(歌曲id)
    响应内容:歌曲url地址
  3.歌曲详情获取
    请求地址:https://autumnfish.cn/song/detail
    请求方法:get
    请求参数:ids(歌曲id)
    响应内容:歌曲详情(包括封面信息)
  4.热门评论获取
    请求地址:https://autumnfish.cn/comment/hot?type=0
    请求方法:get
    请求参数:id(歌曲id,地址中的type固定为0)
    响应内容:歌曲的热门评论
  5.mv地址获取
    请求地址:https://autumnfish.cn/mv/url
    请求方法:get
    请求参数:id(mvid,为0表示没有mv)
    响应内容:mv的地址

使用时有不懂的地方也可私信我，好了，最好欢迎大家的三连（点赞，关注、收藏），祝你生活愉快……