🥐 1、新建一个Vue项目
🧀 1-1、使用npm安装Vue脚手架
🍞 1-2、使用vue脚手架初始化Vue项目
🥖 2、APlayer 和 MetingJS 的简单介绍
🥨 2-1、APlayer开源音乐播放器
开源地址:https://github.com/DIYgod/APlayer
在线文档:https://aplayer.js.org/#/zh-Hans/
🥚 2-2、MetingJS插件
开源地址:https://github.com/metowolf/MetingJS
Version | API Status | APlayer |
---|---|---|
1.2.x | Supported | ^1.10.0 |
2.0.x | Latest | ^1.10.0 |
参数选项 | 默认值 | 详细描述信息 |
---|---|---|
id(编号) | require | 歌曲ID /播放列表ID /专辑ID /搜索关键字 |
server(平台) | require | 音乐平台:netease,tencent,kugou,xiami,baidu |
type(类型) | require | song,playlist,album,search,artist |
auto(支持类种 类) | options | 音乐链接,支持:netease,tencent,xiami |
fixed(固定模式) | false | 启用固定模式,默认false |
mini(迷你模式) | false | 启用迷你模式,默认false |
autoplay(自动播放) | false | 音频自动播放,默认false |
theme(主题颜色) | #2980b9 | 默认#2980b9 |
loop(循环) | all | 播放器循环播放,值:“all”,one”,“none” |
order(顺序) | list | 播放器播放顺序,值:“list”,“random” |
preload(加载) | auto | 值:“none”,“metadata”,“'auto” |
volume(声量) | 0.7 | 默认音量,请注意播放器会记住用户设置,用户自己设置音量后默认音量将不起作用 |
mutex(限制) | true | 防止同时播放多个玩家,在该玩家开始播放时暂停其他玩家 |
lrc-type(歌词) | 0 | 歌词显示 |
list-folded(列表折叠) | false | 指示列表是否应该首先折叠 |
list-max-height(最大高度) | 340px | 列出最大高度 |
storage-name(储存名称) | metingjs | 存储播放器设置的localStorage键 |
🍳 3、将上述开源插件整合至Vue项目中
🧈 3-1、引入上述差距对应js文件
<!-- APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
🥞 3-2、在App.vue内使用Meting.js
<meting-js
id="8692248848"
server="tencent"
type="playlist"
fixed="true"
autoplay="true"
loop="all"
order="random"
preload="auto"
list-folded="ture"
list-max-height="500px"
lrc-type="1">
</meting-js>
🧇 3-3、启动项目!
🥓 3-3-1、在控制台输入命令启动vue项目
在 Terminal
中输入 npm run serve
命令即可启动项目
🥩 3-3-2、通过package.js启动项目
🍗 4、音乐播放器歌曲播放源切换
🍖 4-1、QQ音乐歌单播放
- 更换配置中server为tencent(QQ音乐)
- 更换配置中type为自己需要的类型 (song=>歌曲 playlist=>歌单 …)
- 更换配置中id为自己歌曲、歌单…的id
🌭 4-1-1、获取QQ音乐歌单id
🍔 4-1-2、替换App.vue中的id
🍟 4-2、网易云音乐歌单播放