使用vue-cli 基于网易云音乐API 搭建一个简单的音乐播放器

一、使用Vue-Cli搭建项目

注：如果使用的是vue-cli的老版本(4.20以下的)建议使用以下命令升级vue-cli版本

npm uninstall vue-cli -g
npm uninstall @vue-cli -g

1、选择路径创建项目

进入需要创建项目的文件夹

vue create vue-music

随后出现一些配置选项，选择Manually select features进行配置

2、选择预配置项

选择Router、Vuex、CSS Pre-processors、Linter / Formatter

3、是否使用路由的history模式

可以选也可以不选，之后可以改的，我选择不选

4、选择一个预处理语言

选with node-sass就行

5、选择ESLint自动化代码格式化检测

从上到下分别是：只预防、airbnb配置、标注配置、最高配置

作为学习选择只预防就可以了

6、选择代码检测时机，选择保存时检测

7、将配置文件放到pakage.json中还是单独文件中

选择pakage.json即可

8、是否保存选择的配置

这里不保存选n

---

安装成功后显示如下

随后进入项目文件夹

运行项目就可以了

npm run serve

二、下载使用网易云音乐API

到这个网址下载https://github.com/Binaryify/NeteaseCloudMusicApi

进入到文件夹内，npm install安装依赖包

使用node app.js来运行服务

显示

并且浏览器中输入http://localhost:3000显示如下页面，则运行成功

三、安装vue-aplayer和axios

1、安装vue-aplayer

npm i vue-aplayer

显示如下内容则成功

2、安装axios

npm install axios

显示如下内容则成功

四、实现音乐播放功能

1、修改about.vue

直接使用vue-cli项目搭建生成的about.vue

省的麻烦重新封装自定义组件与配置路由

2、代码内容如下

<template>
  <div>
    <div style="padding:10px 0;">      
      <a-player autoplay=true :list="songList" :music="songList[0]" :showlrc="true" :narrow="false" theme="#b7daff" mode="circulation" v-if="flag" listmaxheight='96px' ref="player"></a-player>
    </div>
  </div>
</template>



<script>
import axios from 'axios'
import VueAplayer from 'vue-aplayer'
 
export default {
  components: {
    //别忘了引入组件
    'a-player': VueAplayer
  },
  data() {
    return {
      flag:false,
      musicList:'',
      songList:[]
    }
  },
  async mounted () {
    //异步加载，先加载出player再使用
    await this.init();
    let aplayer = this.$refs.player.control;
    aplayer.play();
  },
  
  methods:{
    async init () {
      //这边是引入了axios然后使用的get请求的一个音乐列表接口
      //这边url随大家更改了
      let data = await axios.get("http://localhost:3000/top/list?idx=1");  //使用await ，data会等到异步请求的结果回来后才进行赋值
      //以下就是这边对请求的一个处理，看接口了
      if(data && data.status==200){       //200: '服务器成功返回请求的数据
        let getMusicList=data.data.playlist.tracks;
        for(let i=0;i<getMusicList.length;i++){
          let obj={};
          obj.title = getMusicList[i].name;
          obj.artist =  getMusicList[i].ar[0].name;
          obj.pic =  getMusicList[i].al.picUrl;
          obj.id = getMusicList[i].id;
          let url =await axios.get("http://localhost:3000/song/url?id="+obj.id);
          obj.src =url.data.data[0].url
          //把数据一个个push到songList数组中，在a-player标签中使用 :music="songList" 就OK了
          this.songList.push(obj);
        }
        //因为是异步请求，所以一开始播放器中是没有歌曲的，所有给了个v-if不然会插件默认会先生成播放器，导致报错(这个很重要)
        this.flag = true;
      }
    }
  }
}
</script>
 
<style scoped>
</style>

五、分析代码

1、注册组件

  components: {
    'a-player': VueAplayer
  },

2、利用axios的get请求获取数据

使用 await, data 会等到异步请求的结果回来后才进行赋值

let data = await axios.get("http://localhost:3000/top/list?idx=1");

3、判断服务器成功返回请求数据

 if(data && data.status==200)

4、数据一个个push到songList数组中

this.songList.push(obj);

5、实现播放功能

async mounted () {
    //异步加载，先加载出player再使用
    await this.init();
    let aplayer = this.$refs.player.control;
    aplayer.play();
  },

六、结果展示

七、我遇到的问题

1、在package.json中添加

"rules": {"no-mixed-spaces-and-tabs": "off"}   

否则app.vue有可能出现error Mixed spaces and tabs no-mixed-spaces-and-tabs问题

2、[vue/no-parsing-error]\nParsing error: x-invalid-end-tag问题

对策：vscode里面选择 设置 搜索 vetur.validation.template 把对勾去掉

---

资料内容来源网络