经过数小时的奋战，BGM 功能终于弄好了~~> <浏览器兼容性什么的请死一死吧……
如果汝对它的实现感兴趣的话，可以点击下面的链接查看源码：http://ccloli.com/bgm
其实这货算是策划已久什么的？在很久以前就想像 QQ 空间那样给自己的博客加个 BGM（对此 @琥珀hentai 对我吐槽了许久← ←）。在上上个月的信息技术段考时，由于试卷早已答完而老师还没有收卷，所以就无聊在桌子上写了这货的雏形……
请不要吐槽我的字_(:з」∠)_
至于实际上单纯添加 BGM 还算简单，难点只是在其他的地方……
- 在跳转页面时仍旧可以继续播放音乐。由于此人不会 XMLHttpRequest 之类高级的东西，所以做不出 SoundCloud 这样的效果，所以只能用老土的 iframe。
- 音乐播放控制。这个也算简单，参考了《HTML5 audio 實驗》这篇文章，大致了解了一下，实现了音乐播放控制（具体请将鼠标移至歌曲信息的那一栏上），虽然很简陋什么的_(:з」∠)_……
- 单标签页播放音乐。这个比较复杂，如果并没有这一举措，会导致每一个在新标签页打开的网页都会播放音乐。刚开始打算用 localStorage 记录播放标记，因为 localStorage 可以跨标签页传递数据，而不是像 sessionStorage 那样只限单个页面的会话。但我并不知道怎么主动将这个标记清除掉，因为即便是关闭这个网页甚至整个浏览器这个标记都会存在，结局就是背景音乐只能播放一次，除非清除 HTML5 数据。之后打算改用 cookie 的方式记录播放标记，但是这样只能在下次打开浏览器时才能播放。再之后考虑用回 localStorage，方案是只要页面没有关闭就每隔 1 秒向 localStorage 写入当前时间，如果打开网页调用该时间时发现与当前时间相差 10 秒就开启 BGM，但是这样对 localStorage 写入过于频繁会产生浏览器在不停刷新的样子（至少 chrome 是）……在查找相关资料后发现原来有个事件叫 unload……
window.onbeforeunload = function(){...} //貌似还有个window.onunload，区别在于执行的时间于是绑定该事件后，问题基本解决……如果出现浏览器异常退出导致无法执行什么的……请手动点击页面最下方的“Clear Running-BGM Data”……
- 网址的更新。这个算是一个难点了，要知道 iframe 里网址的更新是不会反馈到父框架上的。通过 Google 的帮助，找到了一种比较好的方法——HTML5 History API：
window.history.pushState('Object', 'Title', 'Url'); // Object 是对象名，不知道有什么作用；Title 可以修改网页标题，不过目前没有浏览器支持，所以需要 document.title 配合使用；Url 是目标网址，可以是相对地址，也可以是绝对地址，仅限当前域网址自动切换什么的，用个 setInterval 就可以搞定。至于跨域的问题捣鼓了好久都没有弄好/ \毕竟基于浏览器安全性设置的东西不好弄，所以只能加个提示，后台一直报错什么的让它一直报吧，我无力了……
- 播放列表的更新。此人偷懒，直接用已经弃用
且从未启用的电台播放列表管理页面来弄了（源码见下，手写稿什么的明天再放）……反正能用就行…… - 浏览器兼容性……这个我就不说了，看源码就懂了……各种辛酸泪_(:з」∠)_
- // http://ccloli.com/bgm/editlist.php
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>音乐列表数据修改</title>
- </head>
- <body>
- <?php
- if(@$_POST['action']=='1'){
- $data=file_get_contents('playlist.txt').'{
- title: \''.$_POST['title'].'\',';
- $data.='
- artist: \''.$_POST['artist'].'\',';
- $data.='
- album: \''.$_POST['album'].'\',';
- $data.='
- url: \''.$_POST['mp3'].'\'
- },';
- $writein= file_put_contents('playlist.txt',$data);
- if($writein==true)$context='文件写入成功！';
- else $context='文件写入失败！';
- }
- elseif(@$_POST['action']=='4'){
- $data=$_POST['value'];
- $writein= file_put_contents('playlist.txt',$data);
- if($writein==true)$context='文件写入成功！';
- else $context='文件写入失败！';
- }
- if($context){
- ?>
- <style>
- @-webkit-keyframes 'tips'{from{opacity:1;top:0px}60%{opacity:1;top:0px}to{opacity:0;top:-36px}}
- @-moz-keyframes 'tips'{from{opacity:1;top:0px}60%{opacity:1;top:0px}to{opacity:0;top:-36px}}
- @-o-keyframes 'tips'{from{opacity:1;top:0px}60%{opacity:1;top:0px}to{opacity:0;top:-36px}}
- @keyframes 'tips'{from{opacity:1;top:0px}60%{opacity:1;top:0px}to{opacity:0;top:-36px}}
- </style>
- <div style="position:fixed;top:-1000px;z-index:1000;left:0px;width:100%;height:36px;background:pink;color:red;text-shadow:2px 2px 5px #000,2px 1px 10px gray;font-size:24px;text-align:center;-webkit-animation:'tips' 5s;-moz-animation:'tips' 5s;-o-animation:'tips' 5s;animation:'tips' 5s;point-event:none">
- <?php echo $context ?>
- </div>
- <?php
- }
- ?>
- <form method="post" name="setting1" action="editlist.php">
- <h2>添加到播放列表</h2>
- <hr>
- <input name="action" value="1" hidden>
- 标题 <input name="title" style="width:300px" /><br />
- 演唱 <input name="artist" style="width:300px" value="<?php if(@$_POST['artist'])echo $_POST['artist'] ?>" /><br />
- 专辑 <input name="album" style="width:300px" value="<?php if(@$_POST['album'])echo $_POST['album'] ?>" /><br />
- mp3 <input name="mp3" style="width:300px" /><br />
- <input type="submit" onclick="document.getElementsByName('mp3')[0].value=document.getElementsByName('mp3')[0].value.replace('https://skydrive.live.com/redir?resid=','http://storage.live.com/items/');">
- </form>
- <form method="post" name="setting4" action="editlist.php">
- <h2>手动修改播放列表</h2>
- <hr>
- <input name="action" value="4" hidden>
- <textarea name="value" style="width:100%;height:500px"><?php echo file_get_contents('playlist.txt') ?></textarea><br />
- <input type="submit">
- </form>
- </body>
- </html>
好吧大致就是这样，虽然目前音乐不多——重复播放几率颇高啊——而且没有多少纯音乐，咱实在是没有太多精力弄太多啊/ \今天晚上终于把播放进度以及从来没有注意的 chrome only 什么的弄好了……累死了，去睡觉吧/ \
顺便吐槽 IE9 的缓冲机制/ \你妹啊缓冲后就不能等等再播放吗……缓冲 0.5s 播放 0.5s 再缓冲 0.5s 再播放 0.5s 无限循环累不累啊……还有 Firefox 终于支持 mp3 了 TUT ogg 对于 chrome 来说就是个坑啊还要缓冲完才能放……
嗯嗯，还有，大家说一下大家喜欢哪类曲目吧0 0，比如纯音乐、日文、英文什么的……嘛嘛，就是这样，各位晚安 =3=
SF
喵喵喵喵
课桌都被cc你残害成什么样子了www
@天羽ちよこ 其实我们这里的课桌都有 20 年以上的历史了……
没有音量调节，差评～
看着 onunload ，sessionStorage 哭了……
（另外，你还没实现保障关了播放音乐的网页，其它网页会自动播放音乐。）
还有页底各种服务器探针啥的公开真的没关系么？= =lll
@Jak Wings 找到单调调节了……不过没有记录配置，等待改进。X_X
@Jak Wings 比较喜欢纯音乐
@Jak Wings 保存配置什么的等一段时间吧……以后会添加一个完整的设置页……
onunload 和 sessionStorage 怎么了/ \
（其实我就是想那样← ←这不是 bug）
仔细看了一下，服务器探针没有涉及隐私吧……
@864907600cc sessionStorage的资料会在你关闭所有那个域名的标签时自动清空。
探针暴露了真实的文件地址，还有服务器设置，方便入侵分析～
@Jak Wings 不对，sessionStorage 只针对单个标签页/窗口，如果你关闭这个页面，数据就会清空，而且它只能在这个页面使用，即使你打开一个新的标签页也不能得到原先的 sessionStorage 数据。换句话说，sessionStorage 的数据仅在当前标签页下有效；或者说一个标签页对应一个 sessionStorage。
@864907600cc _(:з」∠)_ 啊，忘了……
这货就是原先 FM 播放列表管理页面的源码/ \就是最后那一长串源码的原型……
@864907600cc 无法直视的字体，刷新页面时竟然还能保持播放，好神奇～
@Jak Wings 如果你是刷新框架内页面是不会终止播放的；如果你是刷新整个网页会激活 onbeforeload 事件清除正在播放的标记，在获取页面时会重新激活 BGM。
@864907600cc = = 原来是刷新评论区……_(:з」∠)_
@Jak Wings 其实我一直在好奇 SoundCloud 是怎么做到的……
@864907600cc 搜索SoundCloud从任意时间点播放音乐的奥秘～＼(0_0＼)
@864907600cc 碉堡吧
我能吐槽桌子上的塗鴉麼……好懷念啊……
要是一點進來就是“我不斷的尋找，油膩的師姐在哪裡”就好了wwww
@独星 節操啊ヾ(｡｀Д´｡)
@864907600cc 节操在哪里！
一打开网页听到声音就果断alt+w了，话说本来就听着歌突然插些
乱七八糟的东西进来/ \（你hentai，汝全家都是hentai
@千与琥珀 噗。。hentai你好
@天羽ちよこ 大叔乃好~ （一杆下钓了不少
@千与琥珀 大概我不比你大多少wwww
@天羽ちよこ 呵呵（我可比你瘦多了 wwwwwwww
@千与琥珀 乃有100斤么？
@天羽ちよこ 你也知道~
@千与琥珀 hentai 你好
alt + w？看來你挺享受这音乐的ww
@864907600cc 果然是烧酒表皮藏着的那可大叔心被我挖出来了吗？
@千与琥珀 滚粗← ←
@864907600cc 呵呵~
@864907600cc 果然
@千与琥珀 ← ←so？
@864907600cchas proven for you
最讨厌带BGM而且居然还是默认ON的网站了偶还得关iTunes的播放(ﾉ｀A”)ﾉ 彡┻━┻
@lovee 我我我我错了QAQ我只是想要体现它的存在感而已……
另外刚刚把代码改好了……应该不会自动播放了……
@864907600cc 怎么音乐彻底没了。。
@天羽ちよこ 貌似刚刚我也出问题了_(:з」∠)_懒得排查了，点一下页面最底部的“Clear Running-BGM Data”应该就能解决问题
@864907600cc 嗯，果然结局了www 话说 要早睡！
@天羽ちよこ 手滑怎么打成结局了。。是解决。。
@864907600cc 嗯现在正常了，话说上次偶打开的时候还有整个页面下半部分都不显示的严重问题w
@lovee 那可能是浏览器兼容性的问题了，这个只在 Opera 下出现过，由于 Safari 不再更新 Windows 版本我也不好测试
@864907600cc 现在没问题了，估计可能是当时插件哪段代码没写对啥的w
噗。。。两个bgm了www
screencloud.net/v/jRGQ
@天羽ちよこ 不应该吧……难道汝又点了清除……？/ \
话说汝不觉得来来去去都是这几首歌不会腻？
@864907600cc 黑白不好吧www
身为天朝人应该远离整只才对
@864907600cc 我只是随便点了几下…..
听多了当然会腻的啦www
但是来cc博客不是为了听歌的诶。。
@天羽ちよこ =.=没错，我远离政治了，所以今天政治模拟会考考砸了……
=，=其实我想直接拉萌否电台的资源，反正在线播放对于十多秒的 ping 和 64Kbps 什么的并不在意，不过这样子对服务器负担应该比较大……
@864907600cc 我去准备准备睡觉了喵，早点睡啊笨淡！
我以前也经常关注政治的….后来入宅了
就无所谓了www
@天羽ちよこ OK=.=
弄好关闭效果界面了，睡觉……算了还是留一天吧ww为什么我的环聊列表里出现了cc乃的名字wwww
@天羽ちよこ 不知道=.=我没有开通 Google+
@864907600cc 快去开通～
@天羽ちよこ 我用 G+ 没有意义的=.=我不习惯目前的社交模式
@864907600cc 其实不是叫你去开通G+啦www 只是装个hangouts插件而已这样打开chrome就能和cc聊天了wwww
@天羽ちよこ 我在用 XP，XP 有 360 =.=去吃饭，另外……
不是”插件”是”扩展”!!!
@864907600cc @864907600cc (/´Д｀)/ 为什么要强调是扩展…..吃好～吃完了早点睡！不能养成晚睡的习惯…….我也收拾收拾去睡了…..
好热闹的评论区 = =
BGM挂掉了？turn on之后没声音的说
@千歳 可能是无法连接到 SkyDrive 的服务器吧……理论上 Firefox 21 是支持 mp3 文件的……
或者是和 Firefox 的页面黑白样式冲突了，IE 是有专门的滤镜的（filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)），Chrome 也是有专门的滤镜的（-webkit-filter: grayscale()），而 Firefox 是用 javascript 实现的（filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”)）
@864907600cc
咳咳..其实我第一次来的时候也对黑白耿耿于怀，不是css所以去不掉好难受…
现在能放了。囧，大概是当时网络不稳定的缘故
@千歳 其实真的是 css _(:з」∠)_
@864907600cc
…囧。
请无视我，当我农民刚进城没上过网嗯…
@千歳 其实我在 Google 之前我完全不知道 Firefox 支持 filter 这个 css……
@864907600cc
我是懒得看文档星人，除了-webkit-filter之外都不知道 _(:3ゝ∠)_
cc是loli属性的程序娘？
@千歳 我也希望自己是 loli 属性的程序娘，不过二次元和三次元所不同，你懂的_(:з」∠)_
filter 曾经只看见在 IE 上出现过，-webkit-filter 只有 webkit 浏览器支持……
@864907600cc
懂w
因为只有webkit的filter是符合标准的，ms那种奇形怪状的语法从来都没用过..至于ff就不知道是怎么样了，貌似还不支持filter？
不过IE和FF的下个版本就都会支持filter了应该
@千歳 IE 支持使用 IE 自带的滤镜（这一点算是旧版本 IE 少有的优点了）
filter 支持还是需要时间的，Firefox 到 21 才支持 mp3 和 mp4 视频（好高兴 BGM 不用再专门转 ogg 了_(:з」∠)_）
@千歳 好吧_(:з」∠)_不过确实很强大……
突然要翻墙才能打开了wwww
@天羽ちよこ 看来用 CloudFlare 有鸭梨了……我这里也是这样……有没有什么比较好的 CDN 吗……
@864907600cc 唔…我不用cdn的…..
@天羽ちよこ 表示换服务器的第三天服务器就被墙了……只能挂 CDN 曲线救国……
@864907600cc 之前某人介绍了个cdn给我来着我去找找…..
@天羽ちよこ Incapsula?
@864907600cc 大概就是这个….结果因为它的“BUG”导致我的网站再也无法在这里添加了…..
@天羽ちよこ 表示只能加 www 为前缀的，而且解析了还不生效
@864907600cc 解析了不生效+1
@天羽ちよこ 现在把基本没有用处的分享按钮删了，貌似稍微解决了一点，但还是会不定期 118
@864907600cc 一点多不上课么….
@天羽ちよこ 不同地区有时差啊← ←
这课桌怎么这么破
@婴儿游泳池 教室有好几年历史了
音乐下载慢，以前好快的 _(:з」∠)_
@Jak Wings 音乐基本都是 SkyDrive 的，只有两首是在 Subdomain 的服务器上（汝可以看源码了解）
@864907600cc 貌似晚上网速比较好…… 翻源码一看 O_Olll hentai_alert
@Jak Wings 我是说文章中的那个链接/ \
@864907600cc 也看了 = = 虽然文章看过了，不过还是习惯直接 Ctrl+U 找链接（||→ →)
话说 1 点了怎么还不去上课，时差么？O_O
@Jak Wings …………孩子你时区在哪_(:з」∠)_
@864907600cc （= =||）开个玩笑，不过 BGM 怎么不播放了，我亲手把 bgm_running 调成 false 刷新后它也不载入播放器 Orz
_(:з」∠)_ 手动播放成功…… bgm_start()
@Jak Wings 其实是因为我的源码的问题，如果有 bgm_running 就不会播放，即使改成 false 也没有用……
@864907600cc -_- 竟然多了个CSS特效，不过bug还在 -_-
@Jak Wings _(:з」∠)_ 那不是 bug 啦……
音乐列表会定期更新么？
@Jak Wings 不定期更新，我没有那么多的音乐啊_(:з」∠)_想从萌否扒不过音质只有 64Kbps，只能去搜索，而且有时下一首 320 Kbps 的音乐要下整个专辑（同人音乐你懂的）
@864907600cc O_o 不懂同人音乐专辑
@Jak Wings 特别是那些专辑里的单曲……比如说这首 今、開かれる、トビラ，最后我是在 QQ 音乐里抓的，行列のできるえーりん診療所 这首只能从 nicosound 里提取，而类似 流星サウンド 这首因为 nicosound 的音质混杂度太高，只能把整个专辑下载下来再把这一首歌曲提出来……
@864907600cc 原来是这样啊～超级挖掘者～
@Jak Wings 话说汝觉得 10 月份去买 cc.moe 这域名要多少钱← ←
@864907600cc 为了让商家抢注，可能会像 .XXX 的那么高吧…… =_=
@Jak Wings loli.com 售价 $88,888 _(:з」∠)_ 我估计 loli.moe 的话……估计会被 11 区的技术宅抢走（潜行吧奈亚子W第一集提到的某不存在的域名在当天就被抢注），所以 cc.moe 应该不容易被注意（但是两位价格应该更高_(:з」∠)_）
还有，如果汝有能力的话，帮我要个 http://www.moe.edu.cn 来吧_(:з」∠)_
@864907600cc 3_3 ……梦里或许可以……
可以参考下这篇东东：http://www.ruanyifeng.com/blog/2013/07/how_to_make_search_engines_find_ajax_content.html
@Jak Wings ← ←我用的就是 History API
@864907600cc -_- 竟然用 iframe 替代 AJAX……好吧。
@Jak Wings 汝居然才知道……
@864907600cc →_→ 早知道了，不过用 AJAX 会比较酷……
@Jak Wings 太高端了……
@864907600cc WP或许会有这类插件？
@Jak Wings 懒……
@Jak Wings 还有我觉得我申请不到 .moe 域名，就去注册了个 moemoemoe.ml _(:з」∠)_
@864907600cc 嗯，还有 sellmoe.ml
@864907600cc →_→
@Jak Wings 杯具了……注册时 ccloli.ml 的域名用的 DNSPod，结果解析不了，换 Freedns 也换不过来 _(:з」∠)_
@Jak Wings 好高兴 greatfirewall.ml 到手了_(:з」∠)_不用再管 greatfirewall.asia 了……【够！
@864907600cc -_- ……准备放啥内容的？
@Jak Wings 不知道……可能和 greatfirewall.asia 一样跳转到其他的站点
哇 电台
话说我肿么没看到电台的地址（趴
@魔法少女千寻 页面最下方有个 Turn On/Off BGM ，点击它直至提醒“Background music is turned on.”，刷新页面就可以了（如果无法播放请点击旁边的“Clear Running-BGM Data”）