# zep-music-player

> 基于vue开发的简易音乐播放器

Latest version **1.0.8** (published 2022-04-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install zep-music-player
pnpm add zep-music-player
yarn add zep-music-player
bun add zep-music-player
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2022-04-15 |
| First published | 2022-04-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 42.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zep03 |
| Maintainers | zep03 |

## Links

- npm: https://www.npmjs.com/package/zep-music-player
- npm.io page: https://npm.io/package/zep-music-player

## Dependencies (1)

- [zep-music-player](https://npm.io/package/zep-music-player.md) ^1.0.1

## Recent versions

- 1.0.8 (latest) — 2022-04-15
- 1.0.7 — 2022-04-15
- 1.0.6 — 2022-04-15
- 1.0.5 — 2022-04-15
- 1.0.4 — 2022-04-15
- 1.0.3 — 2022-04-15
- 1.0.2 — 2022-04-15
- 1.0.1 — 2022-04-15
- 1.0.0 — 2022-04-15

## README

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

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

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

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

4. 调整歌曲的音量大小

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

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

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





## 二、起步

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

```vue
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. 完整版

```vue
<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数据格式

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

## 五、musicList数据示例

```json
[
    {
        "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

   ```js
   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: "被汹涌浪潮淹没"}]**

```js
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: "被汹涌浪潮淹没"}]
```

---
_Source: https://npm.io/package/zep-music-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._