个人主页添加随机BGM

1. 音乐外链

网易云音乐：https://music.163.com/#/outchain/2/22559043/m/use

使用html5标签和七牛云外链

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=22559043&auto=1&height=66"></iframe>

2. 随机播放

云音乐无法实现多曲目选择；虾米可以多曲目外链，但无法实现随机选曲。

自己可以在Server或Client实现。但要实现Random Number居然需要写一个Custom Liquid Tag2 。另一个办法是，使用site.time来获取事件然后直接使用，不过这个事件基于Generated Time，只有rebuild这个时间才会改变，在Github Pages上也不现实。

为了偷懒，此处使用Client实现。音乐网站每首曲子都有ID，并且iframe外链的src写的清清楚楚。我们在页面onReady的时候加入一个新iframe即可：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
$(function(){
    arrMusicID = [1306046,26237342,22676185,，33469292,32648543,28287132,26511034,435305771,27588029,41462985,28656150,4010799];
    musicID = Math.floor(Math.random()*(arrMusicID.length));
    $('body').css('height',document.documentElement.clientHeight -5);
 
    if (!Number.isInteger(arrMusicID[musicID])) return;
 
    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);
});