小破站改革加力(加了个音乐播放器)

j0bqIHvD.gif

使用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

放置位置

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


标题:小破站改革加力(加了个音乐播放器)
作者:糖醋鱼
地址:https://expoli.tech/articles/2020/11/16/1605494271425.html

    评论
    0 评论
avatar

取消