Jekyll: 給博客加個隨機BGM

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

 

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

以前給博客添加了 全局BGM

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

那麼該如何實現呢？

其實很簡單，要不就Server實現要不就Client實現。搜了一下要實現Random Number竟然須要寫一個Custom Liquid Tag

其餘人也提到一個辦法，使用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

注意，必須經過 主頁 才能看到播放器

參考文獻

• http://szhshp.org/tech/2016/11/19/whynotaddabgmforurblog.html
• http://stackoverflow.com/questions/7488393/jekyll-liquid-random-numbers