hexo如何添加音乐播放器

安装aplayer

1、npm和github两种方式二选一，拿到dist文件夹就可以了。

1.1npm安装（第一种方法安装）

在hexo博客的文件夹根目录打开git bash，并输入:

npm install --save hexo-tag-aplayer

可以看到在node_module文件夹中多出来一个aplayer文件夹即可

为了方便，将这个dist文件夹复制一份到主题目录下的source文件夹中。

1.2Github下载源码（第二种方法安装）

去github clone源码，并复制dist文件夹到主题下的source。

配置js组件
这一步可以根据教程选择自己喜欢的模式。新建一个music.js（名字随便起），放到主题的source文件夹里（我放在source/js/diy/music.js）例如：

和我选择一样的跟随模式

const ap = new APlayer({
 container: document.getElementById('aplayer'),
 fixed: true,
 autoplay: true, //自动播放
 audio: [
 {
 name: '',
 artist: '',
 url: '',
 cover: '',
 }, 
]
});

选择普通模式

 const ap = new APlayer({
 container: document.getElementById('aplayer'),
 audio: [{
 name: '',
 artist: '',
 url: '',
 cover: '',
 }]
});

等等

搞音乐外链
在一些网站上搜索，例如：https://www.ytmp3.cn/
好用是好用，但是没有cover，逼格不够；包含的音乐也有点少。

自己动手薅
比如说找*Ngay Tho (Remix)*的浴室，在页面按F12进入开发者模式，

因个人的浏览器而定选择Network。

点击播放，找media类型的Request URL就是音乐的URL。

同样的找到想要的cover图片的URL，然后一起填到之前的music.js中。

例如我的：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 3,
    fixed: true,
    autoplay: true, //自动播放
    audio: [
    {
        name: "爱如潮水",
        artist: '张信哲',
        url: 'https://m801.music.126.net/20240114230849/4278582de446b0733e4679dfd3b6e43e/jdyyaac/565a/0e0b/540e/a018f512139a628140c5cdfb1bb47e72.m4a',
        cover: 'https://p1.music.126.net/xt_oovsCzByJNCVOZLWgkA==/2946691201348447.jpg?param=200y200',    


    },
    {
        name: 'Ngay Tho (Remix)',
        artist: '无忧',
        url: 'https://m801.music.126.net/20240115004135/7a99a2eb2f00cbca9c53fcbf78cdb634/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/5415126558/0438/27e9/0261/fb50d2c575e99bee52e84fc65ee507eb.m4a',
        cover: 'https://p2.music.126.net/vveHW4P1RYjCo_YO20lcQg==/109951165562089246.jpg?param=200y200',
        lrc: '[00:00.00]时间不会等谁 直到我意识到\n[00:00.30]爱情就像个愚蠢的笑话\n[00:00.33]还是你天真地相信我?\n[00:00.39]花瓣凋零 细雨飘洒\n心因你跳跃 脑海都是你的身影\n躺下两个多小时了 但我还未进入梦乡\n我的脑袋还在想些什么\n以前每晚都会打个电话\n现在已经忘了你的声音\n在你耳边低语\n我爱你 都是谎言\n那是因为你太天真了以为是个梦\n因为你太天真了以为爱情是一场梦\n时间不会等谁 直到我意识到\n 爱情就像个愚蠢的笑话\n 还是你天真地相信我?\n花瓣凋零 细雨飘洒\n心因你跳跃 脑海都是你的身影\n躺下两个多小时了 但我还未进入梦乡\n我的脑袋还在想些什么\n 以前每晚都会打个电话\n现在已经忘了你的声音\n在你耳边低语\n我爱你 都是谎言\n那是因为你太天真了以为是个梦\n因为你太天真了以为爱情是一场梦\n因为你太天真了以为爱情是一场梦[00:04.17]',

    }

    ]
});

custom_head: ''
custom_html: '<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/js/diy/music.js"></script>'

container: document.getElementById(‘aplayer’)填的Id相同。

然后就保存发布即可！

最终效果：