文章最初釋出於 szhshp的第三邊境研究所 , 轉載請註明
撿了個藍芽耳機，這幾天基本保持“自帶BGM”的狀態o(￣▽￣)o ……
很早實現了Jekyll-全域性BGM^2
再次宣告，一定要通過主頁才能看到播放器: 主頁
不過從頭到尾只有一首曲子，並且雲音樂有些煩人，無法實現多曲目選擇。蝦米可以多曲目外鏈，不過還是無法實現隨機選曲的功能。
那麼該如何實現呢？
三個方案：
- 發郵件威脅蝦米音樂網站實現隨機選曲播放功能
- 發郵件威脅網易雲音樂網站實現多曲目外鏈播放器
- 自己寫
好好好……自己寫
其實很簡單，要不就Server實現要不就Client實現。搜了一下要實現Random Number居然需要寫一個Custom Liquid Tag^1
其他人也提到一個辦法，使用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
點選 主頁 聽聽看吧