1.0.8 • Published 2 years ago
zep-music-player v1.0.8
一、音乐播放器实现的功能
点击播放、暂停按钮播放、暂停歌曲
点击上一首、下一首按钮切换歌曲
点击进度条或者拖拽进度条松开鼠标后调整歌曲的播放进度
调整歌曲的音量大小
设置歌曲的播放模式:顺序播放、随机播放、单曲循环
展示歌曲播放列表内容,点击歌曲播放列表中的每一首歌曲进行歌曲的切换
根据歌曲播放进度滚动歌词列表,高亮某句歌词
二、起步
- 参照element-ui官方文档:https://element.eleme.io/#/zh-CN/component/quickstart 引入element-ui
- 安装zep-music-player: npm install --save zep-music-player
- 在vue项目的main.js中添加以下代码:
import MusicPlayer from 'zep-music-player'
Vue.use(MusicPlayer)
三、用法示例
- 简单版
<template>
<div id="app">
<music-player :music-list="musicList" />
</div>
</template>
export default {
data () {
return {
musicList: []
}
},
methods: {
async getMusicList () {
// 调用接口发送网络请求拿到newMusicList
this.musicList = newMusicList
}
}
}
- 完整版
<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"
}
]
六、工具函数
提供了以下三种工具函数
数值格式化函数(formatCount)
示例:99999999999=> 1000.0亿, 999999 => 100.0万
时间格式化函数(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
歌词格式化函数
示例:将字符串:00:18.299恋恋不舍又念念不忘\n00: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: "被汹涌浪潮淹没"}]