小破站改革加力（加了个音乐播放器）

type

Post

status

Published

slug

2020/11/16/1605494271425.html

summary

使用MetingJS(APlayer) 添加网页音乐播放器

嵌入代码

只需要引入2个JS文件即可


<!-- 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/dist/Meting.min.js>"></script>
<!-- 配置你的 背景音乐信息 -->
<meting-js server="netease" type="playlist" id="5337368124" autoplay="true" preload="auto"  fixed ="true" listFolded="true" order="random" >
</meting-js>

官方参数

名称	默认值	描述
container	document.querySelector('.aplayer')	播放器容器元素
fixed	false	开启吸底模式,详情
mini	false	开启迷你模式,详情
autoplay	false	音频自动播放
theme	'#b7daff'	主题色
loop	'all'	音频循环播放, 可选值: 'all', 'one', 'none'
order	'list'	音频循环顺序, 可选值: 'list', 'random'
preload	'auto'	预加载，可选值: 'none', 'metadata', 'auto'
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
audio	-	音频信息, 应该是一个对象或对象数组
audio.name	-	音频名称
audio.artist	-	音频艺术家
audio.url	-	音频链接
audio.cover	-	音频封面
audio.lrc	-	详情
audio.theme	-	切换到此音频时的主题色，比上面的 theme 优先级高
audio.type	'auto'	可选值: 'auto', 'hls', 'normal' 或其他自定义类型,详情
customAudioType	-	自定义类型，详情
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
lrcType	0	详情
listFolded	false	列表默认折叠
listMaxHeight	-	列表最大高度
storageName	'aplayer-setting'	存储播放器设置的 localStorage key

放置位置

自由选择，可以放在公告栏也可以放在页脚。