Jekyll: 給博客加個隨機BGM

文章最初發佈於 szhshp的第三邊境研究所 , 轉載請註明

撿了個藍牙耳機，這幾天基本保持「自帶BGM」的狀態o(￣▽￣)o ……

很早實現了Jekyll-全局BGM^2

再次聲明，必定要經過主頁才能看到播放器: 主頁

不過從頭至尾只有一首曲子，而且雲音樂有些煩人，沒法實現多曲目選擇。蝦米能夠多曲目外鏈，不過仍是沒法實現隨機選曲的功能。

那麼該如何實現呢？

三個方案：

1. 發郵件威脅蝦米音樂網站實現隨機選曲播放功能
2. 發郵件威脅網易雲音樂網站實現多曲目外鏈播放器
3. 本身寫

好好好……本身寫

其實很簡單，要不就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

點擊 主頁 聽聽看吧

參考文獻