Vue3音乐播放器组件，可显示歌词
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，页面中使用
<template>
<div style="padding-top:20%;display: flex;
justify-content: center;
align-items: center;">
<!-- 一般需要有一个div包着，设置div的宽高，播放器跟随父级宽高-->
<div style="height: 180px;width: 500px;border:1px solid #ccc;padding: 20px">
<AppleMusicPlayer progressColor="rgba(211, 16, 16, 0.1)" diskHW="110px" :musicList="musicList" :darkTheme="darkTheme" :offsetY="25" >
<!-- 这些可以换成图标按钮 -->
<template #next>
下一首
</template>
<template #last>
上一首
</template>
<template #pause>
暂停
</template>
<template #play>
播放
</template>
</AppleMusicPlayer>
</div>
</div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
//主题
const darkTheme=ref(false)
//歌曲列表
const musicList=[
{title:'好运来',img:'https://www.vae.zhangweicheng.xyz/VAE_Article_ShouTu/vae/6802ac85-9f22-4cc4-b812-87238f103c36.jpg',src:'https://www.vae.zhangweicheng.xyz/music/%E7%A5%96%E6%B5%B7%20-%20%E5%A5%BD%E8%BF%90%E6%9D%A5.mp3',lyric:'[00:00.00]好运来-祖海\n' +
'[00:02.60]词：车行\n' +
'[00:05.20]曲：戚建波\n' +
'[00:07.80]好运来祝你好运来\n' +
'[00:11.19]\n' +
'[00:11.79]好运带来了喜和爱\n' +
'[00:16.15]好运来我们好运来\n' +
'[00:20.29]迎着好运兴旺发达通四海\n' +
'[00:24.78]\n' +
'[00:29.17]叠个千纸鹤再系个红飘带\n' +
'[00:32.72]\n' +
'[00:33.23]愿善良的人们天天好运来\n' +
'[00:37.36]你勤劳生活美你健康春常在\n' +
'[00:41.71]你一生的忙碌为了笑逐颜开\n' +
'[00:46.71]\n' +
'[00:47.36]打个中国结请春风剪个彩\n' +
'[00:51.40]愿祖国的日月年年好运来\n' +
'[00:55.56]你凤舞太平年你龙腾新时代\n' +
'[01:00.04]你幸福的家园迎来百花盛开\n' +
'[01:05.36]好运来祝你好运来\n' +
'[01:09.68]好运带来了喜和爱\n' +
'[01:13.91]好运来我们好运来\n' +
'[01:18.17]迎着好运兴旺发达通四海\n' +
'[01:24.22]\n' +
'[01:33.43]叠个千纸鹤再系个红飘带\n' +
'[01:37.46]愿善良的人们天天好运来\n' +
'[01:41.64]你勤劳生活美你健康春常在\n' +
'[01:46.00]你一生的忙碌为了笑逐颜开\n' +
'[01:50.95]\n' +
'[01:51.46]打个中国结请春风剪个彩\n' +
'[01:55.74]愿祖国的日月年年好运来\n' +
'[01:59.87]你凤舞太平年你龙腾新时代\n' +
'[02:04.18]你幸福的家园迎来百花盛开\n' +
'[02:09.62]好运来祝你好运来\n' +
'[02:14.05]好运带来了喜和爱\n' +
'[02:18.24]好运来我们好运来\n' +
'[02:22.52]迎着好运兴旺发达通四海\n' +
'[02:26.74]好运来祝你好运来\n' +
'[02:31.10]好运带来了喜和爱\n' +
'[02:35.35]好运来我们好运来\n' +
'[02:39.63]迎着好运兴旺发达通四海\n' +
'[02:45.09]\n' +
'[02:59.12]好运来祝你好运来\n' +
'[03:03.26]好运带来了喜和爱\n' +
'[03:07.43]好运来我们好运来\n' +
'[03:11.68]迎着好运兴旺发达通四海\n' +
'[03:16.02]通四海好运来'},
{title:'三年二班',img:'https://www.vae.zhangweicheng.xyz/apple_Article_Head/vae/7e6361a6-58f7-4abb-997e-bdd88dd1dc06.jpg',src:'https://www.vae.zhangweicheng.xyz/music/%E5%91%A8%E6%9D%B0%E4%BC%A6%20-%20%E4%B8%89%E5%B9%B4%E4%BA%8C%E7%8F%AD.mp3',lyric:'[ti:三年二班]\n' +
'[ar:周杰伦]\n' +
'[al:叶惠美]\n' +
'\n' +
'[00:00.30]三年二班\n' +
'[00:01.30]作词：方文山 作曲：周杰伦\n' +
'[00:02.30]演唱：周杰伦\n' +
'[00:03.30]\n' +
'[00:06.45]训导处报告 训导处报告\n' +
'[00:09.27]三年二班 周杰伦\n' +
'[00:11.46]马上到训导处来\n' +
'[00:12.71]\n' +
'[00:40.05]眼睛你要擦亮 记住我的模样\n' +
'[00:42.71]表情不用太紧张\n' +
'[00:44.02]我是 三年二班\n' +
'[00:45.37]我专心打球的侧脸还满好看\n' +
'[00:47.52]黑板是吸收知识的地方\n' +
'[00:49.40]只是教室的阳光\n' +
'[00:50.66]那颜色我不太喜欢\n' +
'[00:51.97]没有操场的自然\n' +
'[00:53.32]为何比较漂亮的都是在隔壁班\n' +
'[00:56.04]还有考卷的答案\n' +
'[00:57.34]我刚好都不会算\n' +
'[00:58.64]没关系 再继续努力 没关系\n' +
'[01:01.28]为什么上课时举手很难\n' +
'[01:03.89]为什么拿线上宝物简单\n' +
'[01:06.69]为什么女生不喜欢太胖\n' +
'[01:09.22]为什么都别人手机在响\n' +
'[01:11.81]正手发长球的打法只是初级乒乓\n' +
'[01:14.71]反手短打再狠狠杀球是高级乒乓\n' +
'[01:17.27]回转技巧乒乓 前场速攻乒乓\n' +
'[01:19.95]对墙壁 在练习 乒乓 乒乓\n' +
'[01:22.64]这第一名到底要多强\n' +
'[01:25.93]（不用问 一定有人向你挑战）\n' +
'[01:27.94]到底还要过多少关\n' +
'[01:31.14]（不用怕 告诉他们谁是男子汉）\n' +
'[01:33.46]可不可以不要这个奖\n' +
'[01:36.51]（不想问 我只想要流一点汗）\n' +
'[01:38.79]我当我自己的裁判\n' +
'[01:41.86]（不想说 选择对手跟要打的仗）\n' +
'[01:44.11]这第一名到底要多强\n' +
'[01:46.95]（不用问 一定有人向你挑战）\n' +
'[01:49.24]到底还要过多少关\n' +
'[01:52.57]（不用怕 告诉他们谁是男子汉）\n' +
'[01:54.80]可不可以不要这个奖\n' +
'[01:57.84]（不想问 我只想要流一点汗）\n' +
'[02:00.10]我当我自己的裁判\n' +
'[02:03.10]（不想说 选择对手跟要打的仗）\n' +
'[02:05.28]\n' +
'[02:08.13]全体师生注意\n' +
'[02:09.46]今天我要表扬一位同学\n' +
'[02:11.97]他为校争光\n' +
'[02:13.44]我们要向他看齐\n' +
'[02:15.03]\n' +
'[02:28.06]我不想 就这样一直走\n' +
'[02:30.34]每天都遇上 充满敌意那种眼光\n' +
'[02:33.43]等机会 就是要打倒对方\n' +
'[02:36.10]这种结果我不要 这虚荣的骄傲\n' +
'[02:38.93]这目的很好笑\n' +
'[02:40.21]我其实都知道 你只是想炫耀\n' +
'[02:42.90]我永远做不到 你永远赢不了\n' +
'[02:45.50]我永远做不到\n' +
'[02:46.79]你永远赢不了 永远都赢不了\n' +
'[02:49.58]走下乡 寻找哪有花香\n' +
'[02:52.07]（为什么 这么简单你做不到）\n' +
'[02:54.88]坐车厢 朝着南下方向\n' +
'[02:57.32]（为什么 这种速度你追不到）\n' +
'[03:00.31]鸟飞翔 穿过这条小巷\n' +
'[03:02.80]（为什么 这么简单你做不到）\n' +
'[03:05.60]仔细想 这种生活安详\n' +
'[03:08.07]（为什么 这种速度你追不到）\n' +
'[03:10.93]不好笑 不好笑 不好笑\n' +
'[03:12.71]不好笑 不好笑 不好笑\n' +
'[03:14.57]\n' +
'[03:32.15]这第一名到底要多强\n' +
'[03:35.31]（不用问 一定有人向你挑战）\n' +
'[03:37.48]到底还要过多少关\n' +
'[03:40.59]（不用怕 告诉他们谁是男子汉）\n' +
'[03:42.92]可不可以不要这个奖\n' +
'[03:45.90]（不想问 我只想要流一点汗）\n' +
'[03:48.14]我当我自己的裁判\n' +
'[03:51.25]（不想说 选择对手跟要打的仗）\n' +
'[03:53.99]我不想 就这样一直走\n' +
'[03:56.04]每天都遇上 充满敌意那种眼光\n' +
'[03:58.79]等机会 就是要打倒对方\n' +
'[04:01.82]这种结果我不要 这虚荣的骄傲\n' +
'[04:04.17]我不想 就这样一直走\n' +
'[04:06.34]每天都遇上 充满敌意那种眼光\n' +
'[04:09.34]等机会 就是要打倒对方\n' +
'[04:12.11]这种结果我不要 这虚荣的骄傲\n' +
'[04:14.81]走下乡 寻找哪有花香\n' +
'[04:17.14]\n' +
'[04:20.24]坐车厢 朝着南下方向\n' +
'[04:22.45]\n' +
'[04:25.62]鸟飞翔 穿过这条小巷\n' +
'[04:27.96]\n' +
'[04:30.80]仔细想 这种生活安详\n' +
'[04:33.06]'}, {title:'有何不可',img:'https://www.vae.zhangweicheng.xyz/VAE_Article_ShouTu/vae/e4b7116b-b04b-4381-b8a7-1665d54b97dd.png',src:'https://www.vae.zhangweicheng.xyz/music/%E8%AE%B8%E5%B5%A9%20-%20%E6%9C%89%E4%BD%95%E4%B8%8D%E5%8F%AF%EF%BC%88%E7%8B%AC%E7%99%BD%E7%89%88%EF%BC%89.mp3',lyric:'\n' +
'[00:00.00]有何不可-许嵩\n' +
'[00:05.76]词：许嵩\n' +
'[00:11.53]曲：许嵩\n' +
'[00:23.07]天空好想下雨\n' +
'[00:25.13]我好想住你隔壁\n' +
'[00:27.41]傻站在你家楼下\n' +
'[00:29.42]抬起头数乌云\n' +
'[00:31.86]如果场景里出现一架钢琴\n' +
'[00:34.19]我会唱歌给你听\n' +
'[00:36.59]哪怕好多盆水往下淋\n' +
'[00:39.69]\n' +
'[00:41.95]夏天快要过去\n' +
'[00:44.00]请你少买冰淇淋\n' +
'[00:46.42]天凉就别穿短裙\n' +
'[00:48.63]别再那么淘气\n' +
'[00:51.04]如果有时不那么开心\n' +
'[00:53.37]我愿意将格洛米借给你\n' +
'[00:55.65]你其实明白我心意\n' +
'[00:59.01]为你唱这首歌\n' +
'[01:01.24]没有什么风格\n' +
'[01:03.55]它仅仅代表着\n' +
'[01:05.34]\n' +
'[01:05.97]我想给你快乐\n' +
'[01:08.32]为你解冻冰河\n' +
'[01:10.71]为你做一只扑火的飞蛾\n' +
'[01:14.23]没有什么事情是不值得\n' +
'[01:17.91]为你唱这首歌\n' +
'[01:20.26]没有什么风格\n' +
'[01:22.55]它仅仅代表着\n' +
'[01:24.34]\n' +
'[01:24.94]我希望你快乐\n' +
'[01:27.38]为你辗转反侧\n' +
'[01:29.77]为你放弃世界有何不可\n' +
'[01:33.10]夏末秋凉里带一点温热\n' +
'[01:36.86]有换季的颜色\n' +
'[01:39.53]\n' +
'[01:58.10]天空好想下雨\n' +
'[02:00.05]我好想住你隔壁\n' +
'[02:02.37]傻站在你家楼下\n' +
'[02:04.53]抬起头数乌云\n' +
'[02:06.87]如果场景里出现一架钢琴\n' +
'[02:09.43]我会唱歌给你听\n' +
'[02:11.67]哪怕好多盆水往下淋\n' +
'[02:13.97]\n' +
'[02:14.63]往下淋往下淋\n' +
'[02:16.78]夏天快要过去\n' +
'[02:19.03]请你少买冰淇淋\n' +
'[02:21.41]天凉就别穿短裙\n' +
'[02:23.45]别再那么淘气\n' +
'[02:26.03]如果有时不那么开心\n' +
'[02:28.34]我愿意将格洛米借给你\n' +
'[02:30.62]你其实明白我心意\n' +
'[02:34.03]为你唱这首歌\n' +
'[02:36.28]没有什么风格\n' +
'[02:38.56]它仅仅代表着\n' +
'[02:41.03]我想给你快乐\n' +
'[02:43.35]为你解冻冰河\n' +
'[02:45.74]为你做一只扑火的飞蛾\n' +
'[02:49.24]没有什么事情是不值得\n' +
'[02:52.92]为你唱这首歌\n' +
'[02:55.30]没有什么风格\n' +
'[02:57.63]它仅仅代表着\n' +
'[02:59.99]我希望你快乐\n' +
'[03:02.37]为你辗转反侧\n' +
'[03:04.71]为你放弃世界有何不可\n' +
'[03:08.05]夏末秋凉里带一点温热\n' +
'[03:11.31]\n' +
'[03:21.67]为你解冻冰河\n' +
'[03:23.90]为你做一只扑火的飞蛾\n' +
'[03:27.11]没有什么事情是不值得\n' +
'[03:30.37]\n' +
'[03:31.14]为你唱这首歌\n' +
'[03:33.25]没有什么风格\n' +
'[03:35.59]它仅仅代表着\n' +
'[03:38.03]我希望你快乐\n' +
'[03:40.44]为你辗转反侧\n' +
'[03:42.77]为你放弃世界有何不可\n' +
'[03:46.13]夏末秋凉里带一点温热\n' +
'[03:49.74]有换季的颜色'},
];
</script>
<style scoped>
</style>
属性参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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侧边栏使用，效果如下：
