关于在hexo中添加全局音乐

本文最后更新于:2020年9月16日 晚上

使用音乐平台提供插件

以网易云为例,网页端点击生成外链播放器即可生成外链代码,如我的某个歌单生成外链

可以在自己博客页面中嵌入插件:

1
2
3
4
5
6
<iframe 
frameborder="no" border="0"
marginwidth="0" marginheight="0"
width=530 height=310
src="//music.163.com/outchain/player?type=0&id=2205641361&auto=0&height=430">
</iframe>

效果
缺点非常明显,而最不能忍得是网易音乐有些音乐因为版权保护,没办法生成外链

使用 hexo-tag-aplayer 插件

搭建好自己的博客之后,想要在博客中添加音乐播放器。需要hexo-tag-aplayer插件。 使用Git Bash进入本地hexo的文件夹。输入以下命令
1
npm install --save hexo-tag-aplayer

原先 hexo-tag-aplayer 不支持 MetingJS,使得需要图片url,音乐url等等参数,操作起来都很麻烦,需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地,要了解具体参数和使用可以查看其中文文档了解
然后在 Hexo 配置文件 _config.yml 中添加设置:

1
2
aplayer:
meting: true

接着就可以 在文章中使用 MetingJS 播放器了,打开网页版本的网页云,点开一首歌,找到最上面的网址栏的id,把id填到下面去那个meting之后

1
{% meting "id" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

歌单模板

1
{% meting "627070825" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

有关选项列表如下:

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

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!