Aplayer播放器直连网盘音乐

type

status

date

slug

summary

简介

想在自己的网站导航页嵌入音乐播放器，播放自己网盘的音乐歌单。调研了几款播放器，最终选定Aplayer.js。

Aplayer仓库地址：https://github.com/DIYgod/APlayer

调研

调研了一些站长的做法：

1.直接把音乐放在服务器，这么做，不友好的地方就是占用服务器空间，毕竟不是专业搞音乐。

2.利用Meetingjs调用网易云的播放列表，需要第三方建好的歌单id，而且有歌单，不一定能让你听完一整首。

构思与实现

个人希望在线调用网盘音乐资源，不用上传到网站服务器。

既然能通过meetingjs调用第三方，也就是支持外链，那就有调用网盘的音乐目录的可行性。

实现方式初探

研究发现，meetingjs其实是把第三方歌单列表，生成一个json数组，放在aplayer 的audio里面

网页请求歌单json

预先生成网盘音乐资源列表的json，网页在线调用

通过网盘链接自动生成歌单json

APlayer.min.css和APlayer.min.js可以下载放到对应目录，不用去cdn上加载。

推荐使用阿里云，不限速，而且播放手机端也没问题。onedrive网盘，手机端加载音乐异常，电脑端可以。

播放器收入侧边栏(进阶)

原生的APlayer.min.css智能把列表和播放按钮收起来，还是会留一个封面，如果是手机上就会占用左下角，会有点影响观感。需要把APlayer.min.css下下来进行修改。

APlayer.min.css复制代码进入https://tool.oschina.net/codeformat/css格式化

我们只需要在css中加入以下代码即可实现收入侧边栏

在代码最后加入即可

说明：

.aplayer.aplayer-narrow .aplayer-body { left: -66px !important; }：

这个规则选择 APlayer 播放器容器，并在其类名为 .aplayer-narrow 时，将 .aplayer-body 元素的左边距（left）设置为 66px。这可能用于隐藏或部分隐藏播放器，将其移动到屏幕左侧之外。!important 表示此样式具有最高优先级，优先级高于其他样式。

.aplayer-body:hover { left: 0px !important }：

这个规则选择 .aplayer-body 元素，在鼠标悬停在其上时，将左边距（left）设置为 0px。这可能用于在鼠标悬停时展开或显示播放器。

这些规则的目的是在鼠标悬停时展开播放器，并在非悬停状态时将其左移隐藏。.aplayer-narrow 类可能表示播放器是“狭窄”或“缩小”的状态，而悬停时则会展开。

自定义传入Alist网盘链接

效果展示

扩展功能点：

1.播放列表支持网盘资源，建立常用列表标签，也可以手动输入路径；

2.播放器支持收到左侧，避免占用屏幕。

遇到的问题：

fix模式播放器load新列表异常

fix模式下，如果是没有展开播放信息，重新加载播放列表，加载时播放器就会显示异常。

如果是展开播放信息，重新load就不会有问题。

查看开发者栏元素，发现是调用了这个类aplayer aplayer-withlist aplayer-fixed aplayer-narrow。

那就load之前判断是否是narrow，如果是，移除，再load。

歌词不显示

在APlayer的文档中，lrcType是一个用于指定歌词类型的配置项。lrcType有以下几个可能的值：

0: 不显示歌词。

1: 显示当前歌词。

2: 显示当前歌词和下一行歌词。

3: 显示所有歌词。

如果刚开始实例时没有指定为显示歌词3，后面切换按钮就一直不加载歌词。但是如果要显示歌词，就要加载之后手动点击不显示。

加载之后判断是否是首次加载，如果是模拟手动点击不显示。

加载后会停留几秒钟，之后就关闭了歌词显示，需要歌词，就需要点击按钮打开。

歌词中文乱码

一定要保证歌词是UTF-8编码。

我是被网盘的分享源坑了，第一首是UTF-8，后面是GBK，真是没想到同一批数据，编码还不一样，所以使用notepad，优先排查编码。下面是我踩的坑。

加载后第一首歌词正常显示，第二首开始出现中文乱码。

简介

调研