【精选】Hexo博客技巧：为博客插入音乐

2023-10-25 08:36| 来源: 网络整理| 查看: 265

前言

想要给博客添加音乐，最简单的方法便是利用第三方音乐平台提供的外链播放器，可是效果并不好，外观丑没歌词且体验极差。

如果使用Hexo-Tag-Aplayer插件的话这个问题就能很好地解决了。

原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地。

但是3.0新版本的Aplayer已经支持MeingJS了，MetingJS 是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

具体过程：使用音乐平台提供插件

这里以网易云为例，找到一首歌曲并生成外链播放器，复制html代码：

在合适的地方插入代码即可，效果如下：

在这里插入图片描述

其中利用第三方音乐平台生成外链播放器最大的缺点就是有些音乐因为版权保护，无法生成外链：在这里插入图片描述

使用 Hexo-Tag-Aplayer 插件

hexo-tag-aplayer 就是将 APlayer 内嵌入博客页面的 Hexo 插件。

首先执行安装命令：

npm install --save hexo-tag-aplayer

然后如果你想使用上文提到的 MetingJS 功能，请在 Hexo 配置文件 _config.yml 中设置：

aplayer: meting: true

接着找到一个歌单、歌曲或专辑的链接，复制这个链接的id，这里以QQ音乐举例： https://y.qq.com/n/yqq/playlist/7868042847.html ，这个歌单的id就是7868042847；

最后将以下示例代码插入到你想要呈现播放器的地方即可：

引用Aplayer播放器：插入播放器： {% meting "7868005687" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:1000px" "preload:auto" %}

其中的tencent为公司名，也就是音乐平台，如: netease, tencent, kugou, xiami, baidu；

有关选项列表如下:

选项默认值描述id必须值歌曲 id / 播放列表 id / 相册 id / 搜索关键字server必须值音乐平台: netease, tencent, kugou, xiami, baidutype必须值song, playlist, album, search, artistfixedfalse开启固定模式minifalse开启迷你模式loopall列表循环模式：all, one,noneorderlist列表播放模式： list, randomvolume0.7播放器音量lrctype0歌词格式类型listfoldedfalse指定音乐播放列表是否折叠storagenamemetingjsLocalStorage 中存储播放器设定的键名autoplaytrue自动播放，移动端浏览器暂时不支持此功能mutextrue该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停listmaxheight340px播放列表的最大长度preloadauto音乐文件预载入模式，可选项： none, metadata, autotheme#ad7a86播放器风格色彩设置进阶教程添加全局吸底Aplayer教程

这里以Butterfly主题为例，参考文章：https://butterfly.js.org/posts/507c070f/

在这里插入图片描述

（图源：Butterfly）

关闭 asset_inject

此步骤适用于安装了hexo-tag-aplayer插件的人

由于需要全局都插入aplayer和meting资源，为了防止插入重复的资源，需要把asset_inject设为false

在Hexo的配置文件中：

aplayer: meting: true asset_inject: false 开启主题的AplayerInject

在主题的配置文件中，enable设为true和per_page设为true：

# Inject the css and script (aplayer/meting) aplayerInject: enable: true per_page: true 把Aplayer代码插入到主题配置文件 inject: head: bottom: -

运行Hexo就可以看到网页左下角出现了Aplayer

最后，如果你想切换页面时，音乐不会中断。请把主题配置文件的pjax设为true

为博客添加音乐页面

输入命令新建一个名为music的page：

hexo new page music

打开博客根目录/source/music/index.md文件，写入以下代码即可：

{% meting "7868005687" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:1000px" "preload:auto" %}

效果：

在这里插入图片描述

我的歌单页面：https://amnesia-f.github.io/music/

结语其他参数名称默认值描述containerdocument.querySelector播放器容器元素fixedfalse开启吸底模式, 详情minifalse开启迷你模式, 详情autoplayfalse音频自动播放theme‘#b7daff’主题色loop‘all’音频循环播放, 可选值: ‘all’, ‘one’, ‘none’order‘list’音频循环顺序, 可选值: ‘list’, ‘random’preload‘auto’预加载，可选值: ‘none’, ‘metadata’, ‘auto’volume0.7默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效audio-音频信息, 应该是一个对象或对象数组audio.name-音频名称audio.artist-音频艺术家audio.url-音频链接audio.cover-音频封面audio.lrc-详情audio.theme-切换到此音频时的主题色，比上面的 theme 优先级高audio.type‘auto’可选值: ‘auto’, ‘hls’, ‘normal’ 或其他自定义类型, 详情customAudioType-自定义类型，详情mutextrue互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器lrcType0详情listFoldedfalse列表默认折叠listMaxHeight-列表最大高度storageName‘aplayer-setting’存储播放器设置的 localStorage key

其他详见：APlayer官方文档

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章