Github博客加音乐插件
网易云iframe方式添加音乐
相信很多个人博客的作者都喜欢对自己博客加一些个性化的东西，比如简单的图片，配色，或者是复杂点的博客样式和界面布局等。 对于从QQ空间时代过来的人来说，弄个博客背景音乐那是情有独钟的哈，相信以前很多人也会付费整些好听的音乐放到空间里。 今天介绍个给Github Pages博客播放音乐的方法。由于个人比较喜欢网易云的音乐，所以主要介绍网易云的方法。 其实这个方法特别简单，就是对于版权保护的年代，你喜欢的歌可能不一定都能放到你的博客里。好了说方法吧。
首先你要有网易云账号，然后需要打开网易云的网页版，找到你喜欢的音乐，友情提醒这个寻找可能比较艰辛，因为你需要找到你喜欢的音乐同时还是没有受版权保护的音乐， 受版权保护的音乐在博客里是播放不了的。如果你很幸运的找到了你喜欢而且不受版权保护的音乐，那么你就可以点击生成外链播放器这个链接了，点开后就会跳转到一个网易云音乐插件页面，这里建议选择 iframe插件，flash插件会慢慢不受浏览器的支持，如果没记错，chrome浏览器20年底会停止对flash的支持。选择好之后就可以直接复制页面底下的html代码，like this
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1383271884&auto=1&height=66"></iframe>
我一开始以为这样就ok了，直接粘贴到博客的页面里，然后就能听到我喜欢的音乐了。然鹅，居然只是把iframe的代码给我显示出来了，wtf。
后来google才知道，原来你需要把ifrmae中的width=330, height=86改成width="330", height="86"加上双引号。居然这么小的细节。
改过后再刷新页面你就能看到网易云的播放器了，点击播放，你喜欢的音乐就响起。ok well done！最后还有个细节就是如果你想音乐是自动播放的那就可以把iframe的src代码中的auto=1反之auto=0。
分享几首我喜欢的音乐 ：）
jekyll博客插件形式添加音乐
这种方式添加音乐可以一劳永逸，唯一不是很好的就是你需要可以具有外链形式的网络空间，目前我知道有的阿里云oss，七牛云，又拍云，腾讯云等。 这些网络空间不是大部分需要有备案的域名就是按量计费，腾讯云是免费半年的外链空间，同时空间容量都是有限的。我现在用的是自己的付费阿里云ECS服务器。最后就是你的博客是基于jekyll的，目录结构、页面解析啥和我是一样的：）
好了前提说完了，再说下博客插件吧。下面贴下代码。
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.333%;
height: 0;
background: black;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<script>
function get_youtube_id(url) {
var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
return (url.match(p)) ? RegExp.$1 : false;
}
function vimeo_embed(url,el) {
var id = false;
$.ajax({
url: 'https://vimeo.com/api/oembed.json?url='+url,
async: true,
success: function(response) {
if(response.video_id) {
id = response.video_id;
if(url.indexOf('autoplay=1') !== -1) var autoplay=1; else var autoplay=0;
if(url.indexOf('loop=1') !== -1) var loop=1; else var loop=0;
var theInnerHTML = '<div class="videoWrapper"><iframe src="https://player.vimeo.com/video/'+id+'/?byline=0&title=0&portrait=0';
if(autoplay==1) theInnerHTML += '&autoplay=1';
if(loop==1) theInnerHTML += '&loop=1';
theInnerHTML += '" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>';
el.innerHTML = theInnerHTML;
}
}
});
}
function video_embed() {
var p = document.getElementsByTagName('p');
for(var i = 0; i < p.length; i++) {
//check if this is an external url (that starts with https:// or http://
if (p[i].innerHTML.indexOf("http://") == 0 ||
p[i].innerHTML.indexOf("https://") == 0) {
var youtube_id = get_youtube_id(p[i].innerHTML);
if(youtube_id) {
if(p[i].innerHTML.indexOf('autoplay=1') !== -1) var autoplay=1; else var autoplay=0;
if(p[i].innerHTML.indexOf('loop=1') !== -1) var loop=1; else var loop=0;
var theInnerHTML = '<div class="videoWrapper"><iframe width="720" height="420" src="https://www.youtube.com/embed/' + youtube_id + '?rel=0&showinfo=0';
if(autoplay==1) theInnerHTML += '&autoplay=1';
if(loop==1) theInnerHTML += '&loop=1&playlist='+youtube_id+'&version=3';
theInnerHTML += '" frameborder="0" allowfullscreen></iframe></div>';
p[i].innerHTML = theInnerHTML;
}
if(p[i].innerHTML.indexOf('vimeo.com') !== -1) {
//ask vimeo for the id and place the embed
vimeo_embed(p[i].innerHTML,p[i]);
}
}
}
}
video_embed();
function mp3_embed() {
var p = document.getElementsByTagName('p');
for(var i = 0; i < p.length; i++) {
if(p[i].innerHTML.indexOf('.mp3') !== -1) {
var str = p[i].innerHTML.split('?');
if(str.length == 1) str[1] = '';
var str1 = str[1];
str1 = str1.replace('&','').replace('&','');
str1 = str1.replace('autoplay=1','').replace('autoplay=0','');
str1 = str1.replace('loop=1','').replace('loop=0','');
str1 = str1.replace('controls=0','').replace('controls=1','');
if (str[0].lastIndexOf('.mp3', str[0].length - 4) === str[0].length - 4 && str1.length == 0) {
if(str[1].indexOf('autoplay=1') !== -1) var autoplay=1; else var autoplay=0;
if(str[1].indexOf('loop=1') !== -1) var loop=1; else var loop=0;
if(str[1].indexOf('controls=0') !== -1) var controls=0; else var controls=1;
var newInnerHTML = '<audio';
if(autoplay==1) newInnerHTML += ' autoplay';
if(loop==1) newInnerHTML += ' loop';
if(controls==1) newInnerHTML += ' controls';
newInnerHTML += '><source src="'+str[0]+'" type="audio/mpeg">Your browser does not support the audio element.</audio>';
p[i].innerHTML = newInnerHTML;
}
}
}
}
mp3_embed();
</script>
这段代码可以看出是既可以播放音乐也可以播放视频的。首先需要把这段代码放入到一个文件中，我们可以命名为media.html，然后再把media.html文件放到_include目录中，
之后我们再把 _layouts/default.html文件中加入
{#% include media.html %#}
代码，由于渲染问题，记得把{#%中的#去掉，放入在body标签之中，这样可以使得博客中任何地方都可以加载音乐播放器。
最后就是如何使用了，前期工作都做好后，使用就是最简单了，只要你在需要放音乐的地方插入一段html就可以了，like this <p>http://48.108.99.129/music/banmabanma.mp3</p>
分享一首歌 《斑马斑马》（cover 宋冬野）
http://47.103.98.109/music/banmabanma.mp3
