Vue3音乐播放器组件，可显示歌词

在线体验地址 音乐播放器

1，安装

npm install apple-music-player

或

yarn add apple-music-player

2，在main.ts中引入

import { createApp } from 'vue'

import App from './App.vue'

import AppleMusicPlayer from 'apple-music-player'

createApp(App).use(AppleMusicPlayer).mount('#app')

3，页面中使用

属性参数

参数

说明

类型

默认值

musicList

歌词列表，一个数组对象，对象中需要包含：title(歌名),img(封面),src(音乐地址),lyric(歌词-怎么获取歌词?)

数组

无

progressColor

进度条背景颜色景颜色

颜色

#1890ff

offsetY

歌词一行播放结束后，向上偏移多少(防止出现偏移过多出现的高亮问题)

数字

25

lyricSize

歌词字体大小

字符串

14px

lyricColor

歌词高亮背景色

字符串

#1890ff

diskHW

磁盘图片的宽高

字符串

120px

darkTheme

黑夜主题

布尔

false

插槽Slots

名称

说明

next

下一首

last

上一首

pause

暂停

play

播放

4，其他说明

注意：本组件暂未怎么测试，复制上方代码操作，简单的播放还是没问题的，后续还将继续优化。

该组件已经在张苹果博客https://www.zhangpingguo.com/home侧边栏使用，效果如下：