Hexo博客技巧:为博客插入音乐
Hexo博客技巧:为博客插入音乐
Aciano前言
想要给博客添加音乐,最简单的方法便是利用第三方音乐平台提供的外链播放器,可是效果并不好,外观丑没歌词且体验极差。
如果使用Hexo-Tag-Aplayer
插件的话这个问题就能很好地解决了。
原先 hexo-tag-aplayer
不支持 MetingJS
,使得需要图片url,音乐url等等参数,操作起来都很麻烦,需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地。
但是3.0新版本的Aplayer已经支持MeingJS了,MetingJS 是基于Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
具体过程:
使用音乐平台提供插件
这里以网易云为例,找到一首歌曲并生成外链播放器,复制html代码:
1 | <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=29004400&auto=1&height=66"></iframe> |
在合适的地方插入代码即可,效果如下:
其中利用第三方音乐平台生成外链播放器最大的缺点就是有些音乐因为版权保护,无法生成外链:
使用 Hexo-Tag-Aplayer 插件
hexo-tag-aplayer 就是将 APlayer 内嵌入博客页面的 Hexo 插件。
首先执行安装命令:
1 | npm install --save hexo-tag-aplayer |
然后如果你想使用上文提到的 MetingJS 功能,请在 Hexo 配置文件 _config.yml
中设置:
1 | aplayer: |
接着找到一个歌单、歌曲或专辑的链接,复制这个链接的id,这里以QQ音乐举例: http://aciano.top/redirect/?target=https://y.qq.com/n/yqq/playlist/7868042847.html ,这个歌单的id就是7868042847;
最后将以下示例代码插入到你想要呈现播放器的地方即可:
- 引用Aplayer播放器:
1 | <linkrel="stylesheet"href="http://aciano.top/redirect/?target=https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css"> |
- 插入播放器:
1 |
|
其中的tencent
为公司名,也就是音乐平台,如: netease
, tencent
, kugou
, xiami
, baidu
;
有关选项列表如下:
选项 | 默认值 | 描述 |
---|---|---|
id | 必须值 | 歌曲 id / 播放列表 id / 相册 id / 搜索关键字 |
server | 必须值 | 音乐平台: netease , tencent , kugou , xiami , baidu |
type | 必须值 | song , playlist , album , search , artist |
fixed | false |
开启固定模式 |
mini | false |
开启迷你模式 |
loop | all |
列表循环模式:all , one ,none |
order | list |
列表播放模式: list , random |
volume | 0.7 | 播放器音量 |
lrctype | 0 | 歌词格式类型 |
listfolded | false |
指定音乐播放列表是否折叠 |
storagename | metingjs |
LocalStorage 中存储播放器设定的键名 |
autoplay | true |
自动播放,移动端浏览器暂时不支持此功能 |
mutex | true |
该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停 |
listmaxheight | 340px |
播放列表的最大长度 |
preload | auto |
音乐文件预载入模式,可选项: none , metadata , auto |
theme | #ad7a86 |
播放器风格色彩设置 |
进阶教程
添加全局吸底Aplayer教程
这里以Butterfly主题为例,参考文章:http://aciano.top/redirect/?target=https://butterfly.js.org/posts/507c070f/
关闭 asset_inject
此步骤适用于安装了hexo-tag-aplayer
插件的人
由于需要全局都插入aplayer和meting资源,为了防止插入重复的资源,需要把asset_inject设为false
在Hexo的配置文件中:
1 |
|
开启主题的AplayerInject
在主题的配置文件中,enable
设为true
和per_page
设为true
:
1 |
|
把Aplayer代码插入到主题配置文件
1 | inject: |
运行Hexo就可以看到网页左下角出现了Aplayer
最后,如果你想切换页面时,音乐不会中断。请把主题配置文件的pjax
设为true
为博客添加音乐页面
输入命令新建一个名为music
的page:
1 |
|
打开博客根目录/source/music/index.md
文件,写入以下代码即可:
1 |
|
效果:
我的歌单页面:https://aciano.top/music/
结语
其他参数
名称 | 默认值 | 描述 |
---|---|---|
container | document.querySelector | 播放器容器元素 |
fixed | false | 开启吸底模式, 详情 |
mini | false | 开启迷你模式, 详情 |
autoplay | false | 音频自动播放 |
theme | ‘#b7daff’ | 主题色 |
loop | ‘all’ | 音频循环播放, 可选值: ‘all’, ‘one’, ‘none’ |
order | ‘list’ | 音频循环顺序, 可选值: ‘list’, ‘random’ |
preload | ‘auto’ | 预加载,可选值: ‘none’, ‘metadata’, ‘auto’ |
volume | 0.7 | 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效 |
audio | - | 音频信息, 应该是一个对象或对象数组 |
audio.name | - | 音频名称 |
audio.artist | - | 音频艺术家 |
audio.url | - | 音频链接 |
audio.cover | - | 音频封面 |
audio.lrc | - | 详情 |
audio.theme | - | 切换到此音频时的主题色,比上面的 theme 优先级高 |
audio.type | ‘auto’ | 可选值: ‘auto’, ‘hls’, ‘normal’ 或其他自定义类型, 详情 |
customAudioType | - | 自定义类型,详情 |
mutex | true | 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器 |
lrcType | 0 | 详情 |
listFolded | false | 列表默认折叠 |
listMaxHeight | - | 列表最大高度 |
storageName | ‘aplayer-setting’ | 存储播放器设置的 localStorage key |
其他详见:APlayer官方文档