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

前言

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

实现方法

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

实现代码

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

[评论可见]隐藏内容 - 管理员可见

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

将对应css和js换成你的就行。

Aplayer主要参数说明：

第三方音乐引入

单曲引入

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

代码如下：

server="netease"指定音乐平台为网易云，type="song"指单曲类型，id="496869422"为音乐的id，同链接上的id一致。

歌单引入

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

和上面一样，server="netease"指定音乐平台为网易云，type="playlist"指歌单类型，id="5185298264"为歌单的id，同链接上的id一致。

实现代码：

mini播放器引入

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

实现代码：

本地音乐引入

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

临时有事，先发布，下篇说