给Solo博客增加背景音乐功能

2020-04-15 / solo

给Solo博客增加背景音乐功能

原文摘自：给 Solo 博客增加背景音乐功能

Aplayer

Aplayer 是一个功能强大的 HTML5 音乐播放器

Aplayer 官网文档：https://aplayer.js.org/#/

Metingjs

Metingjs 基于 Aplayer 插件封装好的插件，开箱即用

Metingjs 官网文档：https://github.com/metowolf/MetingJS

使用方法

拷贝以下代码到solo后台的公告里面

<!-- require 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>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js server="netease" type="playlist" id="30642999"></meting-js>

最后效果(某些主题不显示公告内容故不会显示)：

参数说明

选项	默认	描述
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 键

网易云音乐个人歌单 id 获取

登陆自己的号找一个喜欢的歌单，复制地址栏上面的 ID 就可以

“The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.” – Tom Cargill

标　　题：给Solo博客增加背景音乐功能
作　　者：Leif160519
出　　处：https://github.icu/articles/2020/04/15/1586931135375.html
关于博主：坐标六朝古都南京，服务器运维工程师+桌面运维工程师，如有问题探讨可以直接下方留言。
声援博主：如果您觉得文章对您有帮助，可以评论、订阅、收藏。您的鼓励是博主的最大动力！

Leif160519的blog

——————