添加教程
参考:
- https://hacpai.com/article/1583245365874/comment/1583467396134?r=cloudlang
- https://aplayer.js.org/#/zh-Hans/?id=%E5%8F%82%E6%95%B0
- https://github.com/metowolf/MetingJS
存在的问题
- Solo 3.9.0 ,如果把引入的 APlayer.js 文件放入 head 引入的话,会导致后台管理导航菜单无法正常刷新右侧页面,必须通过浏览器刷新,才能正常显示。
- 开启吸底模式 fixed =true,样式有些错乱,不完美
- 歌单不能实时更新。
解决办法
- 不要放入 HTML head,通过公告或者页脚引入都不会有问题。
- 关闭吸底模式 fixed =false,通过公告引入不会有样式问题。233333
- @233333 的作品样式没有问题,功能还在完善中,值得期待,链接:https://heycmm.cn/archives/1581935581
代码:
<!-- 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 |
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于