vue-cli2项目：mimi-music

项目介绍

• 搜索页面
• 歌词展示页面

功能：

1. 实现音乐的搜索功能
2. 实现音频播放，暂停功能
3. 实现音频上一首，下一首播放功能
4. 实现音频自动播放下一首功能
5. 实现歌词与歌曲相关匹配出现

相关技术

vue-cli2，vue-router，vuex，axios，less

步骤一：搭建vue-cli2脚手架

vue init webpack mimi-music

步骤2：安装相关依赖

npm install vuex --save
npm install axios --save
npm install less less-loader@4.1.0 --save

用到的相关接口

接口仅用于学习用

• 获取歌曲

https://api.zsfmyz.top/music/song?songmid=000aWBBQ2fMyBJ&guid=126548448

songmid用于获取token
guid用于获取token
lyric默认为0不获取歌词，1获取歌词

• 获取歌词

https://api.zsfmyz.top/music/lyric?songmid=000wocYU11tSzS

vuex中使用axios来获取歌曲

    // 搜索歌曲（根据名称）
    searchSong (state, payload) {
      axios.get('https://api.zsfmyz.top/music/list', {
        params: {
          n: 30,
          w: payload.keyword
        }
      }).then((response) => {
        // console.log(response)
        // console.log(response.data.data.list)
        this.state.songs = response.data.data.list
        return this.state.songs
      })  

vuex中获取歌曲id音乐播放资源

    // 根据歌曲id查找
    searchById (state, payload) {
      axios.get('https://api.zsfmyz.top/music/song', {
        params: {
          songmid: payload.songmid,
          guid: '126548448'
        }
      }).then((response) => {
        console.log(response)
        console.log(response.data.data['musicUrl'])
        this.state.musicUrl = response.data.data['musicUrl']
        return this.state.musicUrl
      })
    }

获取的歌词（String类型）将其转为数组类型

    // 获取播放歌曲的歌词
    getLyric (state, payload) {
      axios.get('https://api.zsfmyz.top/music/lyric', {
        params: {
          songmid: payload.songmid
        }
      }).then((response) => {
        // console.log(response)
        // console.log(response.data.data['lyric'])
        this.state.lyric = response.data.data['lyric'].split('\n')
        return this.state.lyric
      })
    }

展示

相关代码：
https://gitee.com/yanhsana/mimi-music