[已解决]Solo 通过 MetingJS(APlayer) 添加网页音乐播放器的问题,支持网易云音乐,QQ 音乐 等

本贴最后更新于 1748 天前,其中的信息可能已经水流花落

添加教程

image.png

参考:

存在的问题

  • Solo 3.9.0 ,如果把引入的 APlayer.js 文件放入 head 引入的话,会导致后台管理导航菜单无法正常刷新右侧页面,必须通过浏览器刷新,才能正常显示。
  • 开启吸底模式 fixed =true,样式有些错乱,不完美
  • 歌单不能实时更新。

解决办法

  • 不要放入 HTML head,通过公告或者页脚引入都不会有问题。

image.png

代码:

<!-- MetingJS音乐播放器 不能放到 head 导致系统功能加载异常-->
<link rel="stylesheet" href="//cdn.staticfile.org/aplayer/1.10.1/APlayer.min.css">
<script src="//cdn.staticfile.org/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js server="netease" type="playlist" id="4902606135"  autoplay="false" fixed ="true" </meting-js>

参数配置:

参考官方:https://aplayer.js.org/?utm_source=hacpai.com#/zh-Hans/?id=%E5%8F%82%E6%95%B0

名称 默认值 描述
id require song id / playlist id / album id / search keyword
server require music platform:netease, tencent, kugou, xiami, baidu
type require song, playlist, album, search, artist
auto options music link, support:netease, tencent, xiami
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
3 操作
cloudlang 在 2020-03-12 20:31:23 更新了该帖
cloudlang 在 2020-03-10 10:17:00 更新了该帖
cloudlang 在 2020-03-10 10:15:22 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
cloudlang
弓長之子号叁,桃花源码酒赋,燕歌犬舞何处?云下凨晴为家。 成都