嵌入代码引入JS和CSS

<!-- require APlayer -->
<link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css">
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn1.tianli0.top/npm/meting@2.0.1/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

嵌入位置

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