hexo 插入音乐与视频 | Eternal_zttz

hexo 插入音乐与视频

音乐是不可辜负的

在blog页面中插入音乐主要有下面几种方法:

1. 插入音乐

1. 1使用网易云外链播放器

使用网易云音乐的外链播放器可以说是最简单的方式了,使用简单,效果显著,对于一般的要求可以满足。

添加单首音乐

使用方法:

  1. 进入网易云音乐网页版,搜索你想放上去的歌
  2. 进入播放页面,即正常的听歌
  3. 在音乐图片的下方,有一个生成外链播放器链接,进入该链接
  4. 选择需要放的样式,复制下方的html代码
  5. 把代码放到自己想要的地方,md文件是可以嵌入html代码的,想放哪都行~
1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=442016694&auto=1&height=66"></iframe>

添加网易云歌单
方法和添加单首歌曲一样,选择自己喜欢的歌单,生成外链播放器,放在自己想要的位置即可。

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=997386069&auto=1&height=430"></iframe>

1.2 使用HTML标签插入音乐

可以直接使用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>

将这段代码插入到自己想要的地方即可。

1.3 使用aplayer插件插入音乐

当然,使用外链播放器一般而言可以满足需求,但对于一些特殊的歌曲,是不能生成外链播放器的,歌单有时也有一些小小的bug。而且没有歌词,功能太单一。
这时候,我们就可以借用插件来完成音乐的插入,这也是推荐方法。

音乐插件:
首先:我们进入blog根目录,安装Aplayer插件:

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

使用方法:
按照下面的写法,将自己想要放上去的音乐插入即可。

1
{% aplayer "歌曲名" "歌手名" "歌曲的链接,如http://什么什么什么的.mp3" "http://封面图.jpg" "lrc:http://歌词.lrc" %}

使用该方法还可以插入歌单:

插入一般歌单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% aplayerlist %}
{
"autoplay": false,
"showlrc": 3,
"mutex": true,
"music": [
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://什么什么什么.mp3",
"pic": "https://封面图.jpg",
"lrc": "https://歌词.lrc"
},
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://什么什么什么.mp3",
"pic": "https://封面图.jpg",
"lrc": "https://歌词.lrc"
}
]
}
{% endaplayerlist %}

同步网易云歌单

如果自己想插入几百首歌,该插件还支持另一种很简单的方法,增加MeingJS support同步网易云歌单:
首先,进入自己的站点配置文件,在最后加入如下代码,增加MeingJS支持:

1
2
aplayer:
meting: true

然后,便是同步网易云歌单:
简洁写法:

1
{% meting "60198" "netease" "playlist" %}

进阶写法:

1
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

其中60198是歌单的编号,打开网易云音乐,进入一首歌单,这时网址上的id = 1234567即是编号:

1
2
<!-- 后面的数字即是歌单号-->
https://music.163.com/#/playlist?id=2442120812

插入后即可放心食用~

注意:这个歌曲的链接,封面图和歌词文件需要自己上传到空间中。例如七牛云空间就很不错,有10G的免费存储空间,对于一般要求而言已是够用,并且,国内访问速度很快。

关于这个插件的更多信息及参数列表大家可以进入该插件的GitHub地址中查看。

2.插入视频

2.1使用HTML标签插入视频

我们可以直接使用HTML的标签插入视频,和插入音乐的操作基本一样:

1
<video poster="https://封面图.jpg" src="https://什么什么什么的.mp4" 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 video tag.</video>

2.2 使用dplayer插件插入视频

使用插件,功能灰常强大,例如可以增加弹幕功能等等,非常建议大家使用:

首先在blog根目录下安装插件:

1
$   npm install hexo-tag-dplayer --save

然后在自己的blog中的写法:

1
{% dplayer "url=https://什么什么什么.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=false" %}

要使用弹幕,必须有api和id两项,id的值可以自己随意取,api可以直接使用上方的官网api

关于这个插件的更多信息及参数列表大家可以进入GitHub中查看。

-------------The End-------------