如何在博客中加入音乐

实验

Posted by canjuly on March 20, 2019

起因

最近几天心情比较失落,就想写篇博客。

写博客之前听歌切到了RADWIMPS的なんでもないや,觉得实在是太过于好听,就想放到博客上来。恰好网易云又可以生成外链播放器,于是就决定试一试。

当然最后很不幸的发现因为版权原因,没法放なんでもないや这首歌,只好换了一首别的。

一般的方法

刚开始查资料的时候发现并不难。虽然markdown(也就是我写博客时用的语言)并不支持添加音频,但是最终markdown总归是要转化成html的,所以其实实现起来并不难,只要直接使用iframe标签就可以了。

首先需要获得外链播放器的代码,我用的是网易云的插件,代码如下:

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

我按照网上说的,直接把这段代码直接粘贴到了博客正文。

然后喜闻乐见的,博客直接把这段代码打印了出来,此路不通。

虽然对我来说这个方法并不可行,不过对于相当一部分的博客来说,应该是直接加这段代码就可以了。

正确的方法

首先,我们需要在_includes文件夹中新建一个文件,就把他命名为music.html好了,并将如下代码添加进去:

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&amp;id=&amp;auto=0&amp;height=66"></iframe>

然后我们在博客正文中需要添加音乐的地方加上如下代码:

avatar

id后面的引号内的数字为你想添加的歌的id。

没错,只要这么简单就可以了。

效果

我用了上面的方法之后直接一次成功,不过中间有一点小插曲。我发现非常多的歌都因为版权原因没有办法生成外链播放器,所以我只能放锁那的歌了(还是sana对我好,怪不得是我去年听的虽多的歌手)。

值得注意的是,这个方法同样可以用于添加视频,看来以后大家可以在我的博客上看片了呢

大概就是这样吧,有问题可以在评论区问我。

啊,当然是不会有人问的吧。