安装aplyer

使用npm安装在博客文件夹的根目录输入以下命令

1	`npm install --save hexo-tag-aplayer`

安装完成后可以在/node_modules目录下发现多了一个aplayer

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

创建样式

新建music.js

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

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    autoplay: false,
    loop: 'all',
    volume: 0.7,
    listFolded: true,
    listMaxHeight: 60,
    fixed: true,
    audio: [
        {
            name: 'name1',
            artist: 'artist1',
            url: 'url1.mp3',
            cover: 'cover1.jpg',
        },
        {
            name: 'name2',
            artist: 'artist2',
            url: 'url2.mp3',
            cover: 'cover2.jpg',
        }
    ]
});

替换js中的音乐信息

TODO：这部分可以用爬虫来做，后面有时间再来更新

将js中的歌曲信息改为这样

audio: [
        {
			name: "MOM",
			artist: '是二智呀',
			url: 'http://music.163.com/song/media/outer/url?id=1433338551.mp3',
			cover: 'https://p2.music.126.net/xpLjGFEOzWFhs_-4iMsnNw==/109951165112858259.jpg?param=130y130',	
        },
        {
			name: "知我（抒情版）",
			artist: '尘ah',
			url: 'http://music.163.com/song/media/outer/url?id=1424343020.mp3',
			cover: 'https://p2.music.126.net/lk6TRXO6aS1mOjJUdrZReA==/109951164867820981.jpg?param=130y130',	
        },
    ]

字段名	意义
name	歌曲名
artist	歌手名
url	歌曲的url地址
cover	封面图片的url地址

下面以网易云音乐为例，介绍url和cover的获取方式

url的获取方法：

在网易云音乐中分享歌曲

1	`https://music.163.com/song?id=1433338551&userid=1517126418`

这首歌的id是1433338551所以他的真实地址就是

1	`http://music.163.com/song/media/outer/url?id=1433338551.mp3`

公式如下

1	`http://music.163.com/song/media/outer/url?id=ID数字.mp3`

cover的获取方式

在网页版中找到该歌曲，F12中查看network，筛选Img即可找到

部署到页面中

将下面的代码添加到~/themes/hexo-theme-flexblock-master/layout/_partial/footer.ejs中

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

href中的路径不用改，我改了之后反而不能正常运行。。。。

使用pjax实现全局播放

更新提醒：在实现此功能是将上面部署到页面中部分部署aplayer的位置移动到了~\hexo-theme-flexblock-master\layout\_partial\footer-other.ejs中

将以下代码放在主题文件夹下layout/layout.ejs文件里</body>的前面：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
  // 对所有链接跳转事件绑定pjax容器pjax-container 
  $(document).pjax('a', '#pjax-container', {
    fragment:'#pjax-container',
    timeout:8000
    });   
</script>

pjax使用范例：

1	`$(document).pjax(selector, [container], options)`

上面的函数的意思是点击<a></a>时，所有id=pjax-container的容器将被刷新

观察页面的结构（箭头所指的div是aplayer的div）发现，要刷新的部分只有上面那个class=root-container的div，只要在layout.ejs中添加上id="pjax-container"即可

然后你就随便点吧，音乐是不会中断的

最终效果

后记

加入pjax之后从文章返回首页时，卡片的封面加载不出来了（可能是lazyload的问题？有时间再搞吧）

参考文献：

网易云音乐mp3外链、真实地址下载方法-CSDN博客

hexo上的aplayer应用 | Y’s BLOG (yleao.com)

hexo博客fluid主题添加aplayer组件_aplayer hexo-CSDN博客

添加MetingJS音乐插件，实现站点背景音乐（另带PJAX无刷新） - Tempest

flexblock 添加 aplayer 音乐播放器

a-c-dream 发布于 2024-01-01