一、音乐播放器实现的功能

1. 点击播放、暂停按钮播放、暂停歌曲

2. 点击上一首、下一首按钮切换歌曲

3. 点击进度条或者拖拽进度条松开鼠标后调整歌曲的播放进度

4. 调整歌曲的音量大小

5. 设置歌曲的播放模式：顺序播放、随机播放、单曲循环

6. 展示歌曲播放列表内容，点击歌曲播放列表中的每一首歌曲进行歌曲的切换

7. 根据歌曲播放进度滚动歌词列表，高亮某句歌词

二、起步

1. 参照element-ui官方文档：https://element.eleme.io/#/zh-CN/component/quickstart 引入element-ui
2. 安装zep-music-player： npm install --save zep-music-player
3. 在vue项目的main.js中添加以下代码：

import MusicPlayer from 'zep-music-player'
Vue.use(MusicPlayer)

三、用法示例

1. 简单版

<template>
  <div id="app">
    <music-player :music-list="musicList" />
  </div>
</template>

export default {
  data () {
    return {
      musicList: []
    }
  },
   methods: {
   	async getMusicList () {
   		// 调用接口发送网络请求拿到newMusicList
   		this.musicList = newMusicList
   	}
   }
}

2. 完整版

<template>
  <div id="app">
    <music-player :music-list="musicList" />
  </div>
</template>

<script>
import { getMusicDetailById, getMusicLyricById, getHotMusicList } from '@/service/cloundMusic'
import { parseLyric } from '@/utils/parse-lyric.js'

export default {
  data () {
    return {
      musicList: []
    }
  },
  async mounted () {
    await this.getMusicList(1)
  },
  methods: {
    // 获取歌单列表
    async getMusicList (idx) {
      const res = await getHotMusicList(idx)
      const musicList = res.data.playlist.tracks
      const newMusicList = []
      // for (let i = 0; i < musicList.length; i++) {
      for (let i = 0; i < 20; i++) {
        const songId = musicList[i].id
        const currentSongDetail = await this.getCurrentMusicDetail(songId)
        newMusicList.push(currentSongDetail)
        this.musicList = newMusicList
      }
    },
    // 根据ids获取音乐详细信息，音乐总时长，音乐的歌词
    async getCurrentMusicDetail (ids) {
      const currentSongDetail = {}
      const res = await getMusicDetailById(ids)
      const res2 = await getMusicLyricById(ids)
      const lyricsString = res2.data.lrc.lyric
      currentSongDetail.songId = res.data.songs[0].id
      currentSongDetail.songName = res.data.songs[0].name
      currentSongDetail.songDurationTime = res.data.songs[0].dt
      currentSongDetail.singer = res.data.songs[0].ar[0].name
      currentSongDetail.albumPicUrl = res.data.songs[0].al.picUrl
      currentSongDetail.albumName = res.data.songs[0].al.name
      currentSongDetail.lyrics = parseLyric(lyricsString)
      currentSongDetail.songSource = `https://music.163.com/song/media/outer/url?id=${res.data.songs[0].id}.mp3`
      return currentSongDetail
    }
  }
}
</script>

<style lang="less">
#app {
}
</style>

四、musicList数据格式

{
   songId: 0, // 歌曲id .id
   songName: '', // 歌曲名称 .name
   songDurationTime: 0, // 歌曲总时长 .dt
   singer: '',    // 歌手 .ar[0].name
   albumPicUrl: '', // 专辑封面 .al.picUrl
   albumName: '', // 专辑名称 .al.name
   lyrics: [] // 歌词数组 [{time: 1200, texg: '歌词水水水水'}]
}

五、musicList数据示例

[
    {
        "songId": 1933232289,
        "songName": "slow ride",
        "songDurationTime": 191280,
        "singer": "Matt吕彦良",
        "albumPicUrl": "https://p1.music.126.net/aeuOvTub9uxFx2nvJxme6w==/109951167207220675.jpg",
        "albumName": "十万小时·EP01：00后",
        "lyrics": [
            {
                "time": 560,
                "text": "作词：Matt吕彦良"
            },
            {
                "time": 152940,
                "text": "If you letting me to go"
            },
            {
                "time": 183470,
                "text": "出品 Published By：保质期艺术家S2「十万小时」"
            }
        ],
        "songSource": "https://music.163.com/song/media/outer/url?id=1933232289.mp3"
    },
    {
        "songId": 1932551825,
        "songName": "你还是走了",
        "songDurationTime": 224000,
        "singer": "白皮书乐队",
        "albumPicUrl": "https://p1.music.126.net/Qz4fUD4zZVqFpZIn3qx0TA==/109951167206970471.jpg",
        "albumName": "你还是走了",
        "lyrics": [
            {
                "time": 0,
                "text": " 作词 : 史策"
            },
            {
                "time": 536,
                "text": " 作曲 : 刘家辉"
            }
        ],
        "songSource": "https://music.163.com/song/media/outer/url?id=1932551825.mp3"
    }
]

六、工具函数

提供了以下三种工具函数

1. 数值格式化函数(formatCount)

   示例：99999999999=> 1000.0亿， 999999 => 100.0万

2. 时间格式化函数(formatDuration)

   示例：224000(单位：ms) => 03:44

   import {formatDuration, formatCount} from 'zep-music-player/utils/format'
      
      
   const count = formatCount(999999) // 100.0万
   const time = formatDuration(224000) // 03:44 

3. 歌词格式化函数

   示例：将字符串：[00:18.299]恋恋不舍又念念不忘\n[00:22.290]被汹涌浪潮淹没

   ​ => 转成数组： [{time: 221020 text: "恋恋不舍又念念不忘"}, {time: 224850 text: "被汹涌浪潮淹没"}]

import parseLyric from 'zep-music-player/utils/parse-lyric'

const lyricStrings = "[00:18.299]恋恋不舍又念念不忘\n[00:22.290]被汹涌浪潮淹没"

const lyricArr = parseLyric(lyricStrings) // [{time: 221020 text: "恋恋不舍又念念不忘"}, {time: 224850 text: "被汹涌浪潮淹没"}]