NexT主题添加音乐

NexT主题添加音乐

在Hexo博客中添加音乐,有三种方式可以插入音乐

因为启用了 https,引用网易云的音乐会提示网站不安全,现在这个问题还没有解决,所以就不预览效果了

一、使用html标签

写法如下:

1
<audio src="https://什么什么什么.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the audio tag.</audio>

二、使用网易云外链

网易云音乐的外链很好用,不仅有可以单曲,还能有歌单,有兴趣的自己去网易云音乐找首歌尝试。但是有一些音乐因为版权原因放不了,还有就是不完全支持 https,导致小绿锁不见了。

网易云歌曲外链接获取方法

首先 找到你要下载的歌曲 用网页版打开 复制链接中的歌曲ID 如:
SHAUN - Way Back Home

1
https://music.163.com/#/song?id=863046037

ID就是863046037
然后将ID替换到下面的链接中

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

如:

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

三、安装插件

安装插件可以完美的解决上面的问题,并且用插件,有显示歌词功能,也美观,建议使用这种方法。

安装插件

首先在站点文件夹根目录安装插件:

所在目录:~/blog/

1
npm install hexo-tag-aplayer --save

使用
方法一

在文章中的写法:

1
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

标签参数

  • title : 曲目标题
  • author: 曲目作者
  • url: 音乐文件 URL 地址
  • picture_url: (可选) 音乐对应的图片地址
  • narrow: (可选)播放器袖珍风格
  • autoplay: (可选) 自动播放,移动端浏览器暂时不支持此功能
  • width:xxx:(可选) 播放器宽度(默认: 100%)
  • lrc:xxx: (可选)歌词文件 URL 地址

实例

1
{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

方法二

除了使用标签 lrc 选项来设定歌词,你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中:

1
2
3
{% aplayerlrc "title" "author" "url" "封面(选填)" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}

更多详细使用方法参考文档:hexo-tag-aplayer

获取歌词

歌词的获取,可以直接找到各层次文件,或者可以直接在网易云上通过以下方法获取

1
http://music.163.com/api/song/media?id=863046037

其中id为网易云歌曲的id,打开链接之后,可以把”lyric”字段的值复制下来,再删除\n就可以直接放到aplayerlrc标签中了,这样就可以有歌词出现

0%