网站通过代码引入Aplayer音乐播放器，无需插件

伟英 · 发表于 2023-7-18 18:51:55

前言

前几篇文章写了WordPress通过Hermit X插件引入网易云等音乐，但在我实际使用中发现了一些小bug已经影响到了深白站的日常使用，所以不得不放弃通过插件引入的方法。这里推荐直接用插件引入，毕竟方便省力，具体可以看我上上篇文章。
实现方法

这里还是通过APlayer的方式引入：其界面美观，功能强大。音乐播放器的音乐信息，歌词，进度条，音量，顺序模式，循环模式都支持。可以使用三方音乐外链，还可以使用自己的音乐链接。不过这次是去插件化，直接通过html的方式引入，相对于插件的方法无非就是每一次都得插入html来使用，不过范围大大扩大，只要你的网站支持html都可以直接引入。
实现代码

你可以到APlayer的文档页下载对应的css和js，或者直接使用jsdeliver CDN来引入。如果你的服务器为境内，推荐直接放在服务器本地，毕竟怎么慢都比境外的快，条件允许的话可以给js和css放在cdn托管。用到的文件为APlayer.min.js和APlayer.min.css ，引入的方式如下：
[评论可见]隐藏内容 - 管理员可见

<link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css&#34;>
<script src=&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js&#34;></script>
将对应css和js换成你的就行。
Aplayer主要参数说明：

参数	默认值	描述
container	document.querySelector(&#39;.aplayer&#39;)	播放器容器元素
fixed	false	开启吸底模式
mini	false	开启迷你模式
autoplay	false	音频自动播放，一般浏览器默认会阻止音频自动播放
theme	&#39;#b7daff&#39;	主题色
loop	&#39;all&#39;	音频循环播放，值：&#39;all&#39;、&#39;one&#39;、&#39;none&#39;
order	&#39;list&#39;	音频循环顺序，值：&#39;list&#39;，&#39;random&#39;
preload	&#39;auto&#39;	音频预加载，值: &#39;none&#39;, &#39;metadata&#39;, &#39;auto&#39;
volume	0.7	默认音量，播放器会记住用户设置，用户自己设置音量后默认音量将失效
showlrc	true	歌词是否显示
audio	-	音频，一个音频为对象格式，多个音频为数组格式
audio.name	-	音频名称
audio.artist	-	音频艺术家
audio.url	-	音频链接
audio.cover	-	音频封面
audio.lrc	-	音频歌词
mutex	true	防止同时播放多个播放器，当该播放器开始播放时暂停其他播放器
listFolded	false	列表是否先折叠
listMaxHeight	-	音频列表最大高度

第三方音乐引入

单曲引入

因为我一般是在文章里插入，所以一般是单曲引入，所以优先推荐单曲引入的方式
代码如下：

<link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css&#34;>
<script src=&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js&#34;></script>
<script src=&#34;https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js&#34;></script>
<meting-js server=&#34;netease&#34; type=&#34;song&#34; id=&#34;496869422&#34;></meting-js>server=&#34;netease&#34;指定音乐平台为网易云，type=&#34;song&#34;指单曲类型，id=&#34;496869422&#34;为音乐的id，同链接上的id一致。
歌单引入

现在网易云创建一个歌单，然后记住歌单id，样式如下：

和上面一样，server=&#34;netease&#34;指定音乐平台为网易云，type=&#34;playlist&#34;指歌单类型，id=&#34;5185298264&#34;为歌单的id，同链接上的id一致。
实现代码：

<link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css&#34;>
<script src=&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js&#34;></script>
<script src=&#34;https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js&#34;></script>
<meting-js server=&#34;netease&#34; type=&#34;playlist&#34; id=&#34;5185298264&#34;></meting-js>mini播放器引入

因为我不放网站侧边，因为那样影响用户体验，所以一般不用mini样式。
实现代码：

<link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css&#34;>
<script src=&#34;https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js&#34;></script>
<script src=&#34;https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js&#34;></script>

<meting-js
server=&#34;netease&#34;
type=&#34;playlist&#34;
id=&#34;496869422&#34;
fixed=&#34;true&#34;
mini=&#34;true&#34;
order=&#34;random&#34;
loop=&#34;all&#34;
preload=&#34;auto&#34;
list-folded=&#34;false&#34;>
</meting-js>本地音乐引入

因为我们有时候会把音乐资源放在服务器，所以这里介绍一下本地资源引入，实现方法和上面一样。
临时有事，先发布，下篇说

		自动登录	找回密码
密码			立即注册

网站通过代码引入Aplayer音乐播放器，无需插件

浏览过的版块