如何在hexo博客中添加音乐播放器和视频播放器

一个单纯只有文字和图片的网页未免太安静,怎样给你的博客添加一个音乐播放器?怎样在你的文章中添加一首应景的BGM,或者一段自己录制的音频,或者添加进去一段视频?
这些都非常容易做到。
实际效果请看:https://lc-leo.github.io/

为主页添加背景音乐

我们在侧边栏添加大话西游的片尾曲《一生所爱》,让别人打开我们的博客首页就开始播放这首歌。这里用添加网易云音乐外链播放器的方法来添加背景音乐(其他音乐播放器一样)。
1、首先打开网易云音乐网页端(注意客户端无法添加外链),登录你的账号,搜索《一生所爱》这首歌,点击播放。
2、在左侧看到“生成外链播放器”,点击获取外链(很多歌曲因为版权问题没法获取外链,可以尝试寻找无版权的版本)。

2018-01-09_211523.png

3、这里可以更改音乐播放器的在你的主页中显示的尺寸,还可以选择是否自动播放。这里选择iframe插件,复制地址。


2018-01-09_212033.png

4、将外链插入到侧边栏文件~/themes/next/layout/_macro/sidebar.swig
这里要注意外链代码插入的位置,比如我想把外链播放器放在侧边栏友情链接“Links”这一项之后,我就需要把代码放到Links相关代码后面。

2018-01-09_162025.png

5、若想插入自己录制的音频,先将音频上传到音乐网站,再获取外链即可。

在文章中添加歌单

在文章中添加音乐就更简单了,直接将音乐外链插入到文章特定位置就可以了。
但如果想要分享很多首歌呢,怎样添加一个歌单呢?
首先将想要放到文章中的歌曲添加进一个歌单,然后打开“我的主页”,会看到“我创建的歌单”,进入歌单,便看到“生成外链播放器”了。


2018-01-09_211855.png

在文章中添加视频播放器

添加视频外链的方法同添加音乐外链一样。打开视频网站(非客户端),点击分享,复制HTML外链地址,插入到文章中就可以了。


2018-01-09_214727.png

同样如果想插入自己录制的视频,比如一段视频教程,可以先上传视频到视频网站,然后再获取外链。