文章最初发布于 szhshp的第三边境研究所 , 转载请注明
捡了个蓝牙耳机，这几天基本保持“自带BGM”的状态o(￣▽￣)o ……
很早实现了Jekyll-全局BGM[1]
再次声明，一定要通过主页才能看到播放器: 主页
不过从头到尾只有一首曲子，并且云音乐有些烦人，无法实现多曲目选择。虾米可以多曲目外链，不过还是无法实现随机选曲的功能。
那么该如何实现呢？
三个方案：
- 发邮件威胁虾米音乐网站实现随机选曲播放功能
- 发邮件威胁网易云音乐网站实现多曲目外链播放器
- 自己写
好好好……自己写
其实很简单，要不就Server实现要不就Client实现。搜了一下要实现Random Number居然需要写一个Custom Liquid Tag[2]
其他人也提到一个办法，使用site.time来获取事件然后直接使用，不过有个麻烦就是这个事件是基于Generated Time，本地调试的时候在不停地rebuild，但是只要不rebuild那么这个时间将永远不会改变。Pages也不可能总是给我们rebuild吧
多（yin）方（wei）考（tai）虑（lan），于是用Client凑个数吧。
逻辑没啥好说的，音乐网站每首曲子肯定都有ID，并且iframe外链的src写的清清楚楚。
<ifra*me frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=22706997&auto=1&height=66"></ifra*me>
页面onReady的时候加入一个新iframe即可：
$(function(){
arrMusicID = [33469292,32648543,28287132,26511034,435305771,27588029,41462985,28656150,4010799]; //musicID array
musicID = Math.floor(Math.random()*(arrMusicID.length)) //get a ran num as index
$('body').css('height',document.documentElement.clientHeight -5);
if (!Number.isInteger(arrMusicID[musicID])) return; // load failed, bye~
var iframe = document.createElement('iframe');
iframe.id="bgm";
iframe.style = "position: absolute; bottom: 0; left: 30px; border: 0px;";
iframe.src = '//music.163.com/outchain/player?type=2&id=' +arrMusicID[musicID]+ '&auto=1&height=32';
console.log(iframe.src)
iframe.frameborder="no";
iframe.marginwidth="0";
iframe.marginheight="0";
iframe.width=250;
iframe.height=52;
document.body.appendChild(iframe);
});
So Easy
点击 主页 听听看吧
