Jekyll-这次来玩个随机BGM

好好好……自己写

2017-08-25更新：动态获取网易云歌单
- 实现步骤
参考文献

捡了个蓝牙耳机，这几天基本保持「自带 BGM」的状态 o(*≧▽≦)ツ ……

很早实现了全局 BGM1

再次声明，一定要通过主页才能看到播放器: 主页

不过从头到尾只有一首曲子，并且云音乐有些烦人，无法实现多曲目选择。虾米可以多曲目外链，不过还是无法实现随机选曲的功能。

那么该如何实现呢？

三个方案：1. 发邮件威胁虾米音乐网站实现随机选曲播放功能 2. 发邮件威胁网易云音乐网站实现多曲目外链播放器 3. 自己写

好好好……自己写

其实很简单，要不就 Server 实现要不就 Client 实现。搜了一下要实现 Random Number 居然需要写一个 Custom Liquid Tag2

其他人也提到一个办法，使用site.time来获取事件然后直接使用，不过有个麻烦就是这个事件是基于Generated Time，本地调试的时候在不停地 rebuild，但是只要不 rebuild 那么这个时间将永远不会改变。Pages也不可能总是给我们 rebuild 吧

多（yin）方（wei）考（tai）虑（lan），于是用 Client 凑个数吧。

逻辑没啥好说的，音乐网站每首曲子肯定都有 ID，并且 iframe 外链的 src 写的清清楚楚。

代码语言：javascript复制

<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 即可：

代码语言：javascript复制

$(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 如果你是从主页进来的，刷新下全页面即可换 BGM

2017-08-25 更新：动态获取网易云歌单

需要的材料:

一个服务器
自己在网易云创建一个歌单

实现步骤

其实也很简单，并且既然已经有轮子了就不需要自己来写了：1. fork 一个现成的三方 API: https://github.com/Binaryify/NeteaseCloudMusicApi 2. 把项目 Deploy 到服务器上，参考 repo 的 guide 即可 3. 修改一下服务器端的代码，直接修改app.js文件，里面可以看到如何开启允许跨域 4. 前文获取MusicID的部分修改一下，改成使用AJAX 调用歌单并且返回 JSON 文件 - 当然此处如果 AJAX 调用失败，那么可以加个 callback 然后使用一个 hardcoded 的歌单 5. 解析 JSON 然后取出对应歌单的所有MusicID，然后使用前文的逻辑，选择一个 ID 然后生成播放器

如此以后每次修改音乐就只需要到云音乐端实现即可

参考文献

[来给博客加个全局 BGM 吧]({% post_url 2016-11-19-whynotaddabgmforurblog %})↩
http://stackoverflow.com/questions/7488393/jekyll-liquid-random-numbers ↩

ajax json html

0 人点赞