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

添加教程

image.png

参考:

存在的问题

解决办法

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
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。

    Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!
    具体细节请浏览 B3log 构思

    1091 引用 • 8384 回帖 • 631 关注
  • APlayer
    2 引用 • 25 回帖
3 操作
cloudlang 在 2020-03-12 20:31:23 更新了该帖
cloudlang 在 2020-03-10 10:17:00 更新了该帖
cloudlang 在 2020-03-10 10:15:22 更新了该帖
13 回帖
请输入回帖内容...
  • ztuio

    不错我用了 www.ztu.io

    2 回复
  • adlered

    马一个

  • cloudlang

    嗯嗯,目前有些瑕疵,不是很完美

    2 回复
    1 操作
    cloudlang 在 2020-03-10 14:13:52 更新了该回帖
  • xcchen

    除了不能实时更新歌单,其他都挺好,不像我找的前一个插件,总出问题
     

    1 回复
  • xcchen

    那个也是 aplayer,就是少了 Meting.min.js

  • nomec

    image.png大佬,格式有些乱,不是很正常的样子

    1 回复
  • cloudlang
    fixed ="true"
    

    这个参数固定底部就是有这个问题,
    如果放公告区域,fixed ="false" 的话没有样式问题。

  • cloudlang

    我也发现有这个问题,我的过单更新了,才不多隔一天,播放器才更新。

  • 233333 1 赞同
    1 回复
  • cloudlang

    你网站的评论,网站链接必须用 http 开头,我搞了半天才提交起 😂

    1 回复
  • 233333

    网站非必填 😏

  • cuijianzhe

    马勒

  • rrhtk 1 评论

    请问为啥我一刷新页面他就自动播放,我明明设置的 autoplay=“false”

    autoplay=“false” 删除试一试
    cloudlang
请输入回帖内容 ...