萌否电台 HTML5 脚本
// ==UserScript==
// @name HTML5 for MoeFM
// @version 1.0.15
// @description 萌否电台 HTML5 脚本
// @match http://moe.fm/listen*
// @include http://moe.fm/listen*
// @author 864907600cc
// @icon http://nyan.moefou.org/avatar_group/00/00/000074.jpg
// @grant none
// @namespace http://ext.ccloli.com
// ==/UserScript==
// HTML5 for MoeFM
// 萌否电台 HTML5 脚本
// 适用于有 Flash 强迫症或平台不支持 Flash 的萌否电台用户 o(*￣▽￣*)ブ
// 脚本在 Chrome 32、Firefox 25、IE 11 下测试通过
// 本脚本基于 GPLv3 协议开源 http://www.gnu.org/licenses/gpl.html
// (c) 86497600cc. Some Rights Reserved.
var audio_pretest=document.createElement('audio');
if(audio_pretest.canPlayType('audio/mpeg')==''){
alert('很抱歉，看起来您的浏览器不支持 MPEG (MP3) 文件……\n支持 MPEG 编码的浏览器请参考 http://caniuse.com/#feat=mpeg4');
throw 'It seems that the browser doesn\'t support MPEG media...';
}
var user,user_panel;
if(typeof is_login!='undefined'&&is_login==true){
user=document.getElementsByClassName('navi-panel-button')[0].innerHTML;
user_panel=document.getElementsByClassName('navi-panel-content')[0].innerHTML;
}
var stylesheet=document.createElement('style');
stylesheet.textContent='@font-face{font-family:moefm-html5-icomoon;src:url(data:;base64,AAEAAAALAIAAAwAwT1MvMg6RrIMAAAC8AAAAYGNtYXD3FtuvAAABHAAAAJRnYXNwAAAAEAAAAbAAAAAIZ2x5ZnroKBEAAAG4AAAHjGhlYWQC2F0JAAAJRAAAADZoaGVhCAIEEAAACXwAAAAkaG10eC5AAQAAAAmgAAAAPGxvY2EK2gyiAAAJ3AAAACBtYXhwABQAjgAACfwAAAAgbmFtZSU42yMAAAocAAABpXBvc3QAAwAAAAALxAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABCAAAAAAAAAAAAAAAAAAAAABAAACXWQPA/8D/wAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAIAAAAAcABAAAwAMAAEAIE4LTi1Oq1BcWSdcD18DZK2Fz5dZ//3//wAAAAAAIE4KTi1Oq1BcWSdcD18DZK2Fz5dZ//3//wAB/+Ox+rHZsVyvrKbio/uhCJtfej5otQADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQCAAEADgANAAAsAADcRMxEBEQERAREBEYCAAUABQP7A/sBAAwD+oAFA/sABQP1AAUD+wAFA/qAAAAAAAQCAAEADgANAAAsAAAERIxEBEQERAREBEQOAgP7A/sABQAFAA0D9AAFg/sABQP7AAsD+wAFA/sABYAAAAwAAAA8DcANxACgATABdAAAlIi4CJy4BNDY3PgE0JicuATQ2Nz4BMhYXHgMVFA4CBw4DIyciLgInLgE0Njc+ATQmJy4BNDY3PgEyFhceARQGBw4DIwM+AR4BFREUDgEmLwEjETM3AtAFCQkIAwcHBwcxMTExBwcHBwcRExEHHy8gEREgLx8DCAkJBKsFCQgIBAcHBwceHx8eBwcHBwcSEhIHLC0tLAQICAkFlAoRDQcHDREK8aCg8YACBAUEBxETEQcye4J7MgcRExEHBwgIBx5HTVQrK1RNRx4EBQQCWwIDBgMHEhISBx5NUE0eBxISEgcHBwcHLHF0cSwDBgMCApYKBwYQDvzEDhAGBwrxAYDxAAAAAQAA/8AEAAPAAFQAAAEiDgIHJTQ+ATQ1PAEuATUlHgMzMj4CNTQuAiMiDgIVHAEeARUFLgMjIg4CFRQeAjMyPgI3BRQOARQVFB4CMzI+AjU0LgIjA2ARIB0aC/5RAQEBAQGvCxodIBEhOiwZGSw6ISE6LBkBAf5RCxodIBEhOiwZGSw6IREgHRoLAa8BARksOiEhOiwZGSw6IQEABwwTC9gDBgYHAwMHBgYD2AsTDAcZLDohITosGRksOiEDBwYGA9gLEwwHGSw6ISE6LBkHDBML2AMGBgcDITosGRksOiEhOiwZAAAAAAQAAP/ABAADwAAUACkALQAxAAABIg4CFRQeAjMyPgI1NC4CIxEiLgI1ND4CMzIeAhUUDgIjAzMRIwEzESMCAGq7i1BQi7tqaruLUFCLu2pWmHFBQXGYVlaYcUFBcZhWwICAAQCAgAPAUIu7amq7i1BQi7tqaruLUPxgQXGYVlaYcUFBcZhWVphxQQJg/oABgP6AAAAEAAAADwRAA3EALQBWAHoAiwAAJSIuAicuATQ2Nz4DNTQuAicuATQ2Nz4BMhYXHgMVFA4CBw4DIyciLgInLgE0Njc+ATQmJy4BNDY3PgEyFhceAxUUDgIHDgMjJyIuAicuATQ2Nz4BNCYnLgE0Njc+ATIWFx4BFAYHDgMjAz4BHgEVERQOASYvASMRMzcDegUJCAgEBwcHByEzIhISIjMhBwcHBwcSEhIHKD0pFhYpPSgECAgJBaoFCQkIAwcHBwcxMTExBwcHBwcRExEHHy8gEREgLx8DCAkJBKsFCQgIBAcHBwceHx8eBwcHBwcSEhIHLC0tLAQICAkFlAoRDQcHDREK8aCg8SYCAwYDBxISEgchTFNaLi5aU0whBxISEgcHBwcHKFtlbDg4bGVbKAMGAwJaAgQFBAcRExEHMnuCezIHERMRBwcICAceR01UKytUTUceBAUEAlsCAwYDBxISEgceTVBNHgcSEhIHBwcHByxxdHEsAwYDAgKWCgcGEA78xA4QBgcK8QGA8QACAAAADwJHA3EAIwA0AAAlIi4CJy4BNDY3PgE0JicuATQ2Nz4BMhYXHgEUBgcOAyMDPgEeARURFA4BJi8BIxEzNwIlBQkICAQHBwcHHh8fHgcHBwcHEhISBywtLSwECAgJBZQKEQ0HBw0RCvGgoPHbAgMGAwcSEhIHHk1QTR4HEhISBwcHBwcscXRxLAMGAwIClgoHBhAO/MQOEAYHCvEBgPEAAAEAAAAABAADgAAxAAABFA4CBxUBDgMHLgMnAS4DNTQ+Ahc2HgIXBxcDASc3PgMXNh4CFQQADRojFv7ADBgYGAwMGBgYDP7AFiMaDS5Qaz0VKCYkEV7ggAFg4E8JEhMTCj1rUC4CWiA+NjITAf7BDRYTCgEBChMWDQE/FTA4PCI8bE8vAQEHCREJl3/+vwGBf3cCBAICAQEvT2w8AAMAAP/ABAADwAAUACkALAAAASIOAhUUHgIzMj4CNTQuAiMRIi4CNTQ+AjMyHgIVFA4CIwMNAQIAaruLUFCLu2pqu4tQUIu7alaYcUFBcZhWVphxQUFxmFaAAYD+gAPAUIu7amq7i1BQi7tqaruLUPxgQXGYVlaYcUFBcZhWVphxQQKA4OAAAAABAAAAAAQAA4AAKwAAARQOAgcVAQ4DBy4DJwEuAzU0PgIXNh4CFz4DFzYeAhUEAA0aIxb+wAwYGBgMDBgYGAz+wBYjGg0uUGs9IT03MRQUMTc9IT1rUC4CWiA+NjITAf7BDRYTCgEBChMWDQE/FTA4PCI8bE8vAQEOGSQVFSQZDgEBL09sPAAAAgAAAA8DwANxABAAIAAAAT4BHgEVERQOASYvASMRMzcBFSMnByM1Nyc1Mxc3MxUHAZEKEQ0HBw0RCvGgoPECL1Vra1Vra1Vra1VrA3EKBwYQDvzEDhAGBwrxAYDx/eRVa2tVa2tVa2tVawAAAQAAAAEZmmqL7bJfDzz1AAsEAAAAAADPvH95AAAAAM+8f3kAAP/ABEADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEQAAAAAAEQAABAAAAAAAAAAAAAAAAAAAADwAAAAAAAAAAAAAAAAIAAAAEAACABAAAgAQAAAAEAAAABAAAAARAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4APABaAOQBWAGiAmgCugMIA0wDkAPGAAEAAAAPAIwABAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAmAAAAAQAAAAAAAgAOAJsAAQAAAAAAAwAmADwAAQAAAAAABAAmAKkAAQAAAAAABQAWACYAAQAAAAAABgATAGIAAQAAAAAACgAoAM8AAwABBAkAAQAmAAAAAwABBAkAAgAOAJsAAwABBAkAAwAmADwAAwABBAkABAAmAKkAAwABBAkABQAWACYAAwABBAkABgAmAHUAAwABBAkACgAoAM8AbQBvAGUAZgBtAC0AaAB0AG0AbAA1AC0AaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADEAbQBvAGUAZgBtAC0AaAB0AG0AbAA1AC0AaQBjAG8AbQBvAG8Abm1vZWZtLWh0bWw1LWljb21vb24AbQBvAGUAZgBtAC0AaAB0AG0AbAA1AC0AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAG0AbwBlAGYAbQAtAGgAdABtAGwANQAtAGkAYwBvAG0AbwBvAG4ARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=)}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}html,.cover{background-size:cover;background-position:center center;background-repeat:no-repeat no-repeat}html{background-attachment:fixed;transition:background 0.5s linear}body{background:rgba(255,255,255,0.5);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;font-family:"Hiragino Sans GB","Microsoft Yahei","WenQuanYi Micro Hei",Arial,Tahoma,sans-serif}::selection{background:rgba(0,0,0,0.5)}::-moz-selection{background:rgba(0,0,0,0.5)}section{width:600px;height:600px;position:absolute;left:0;right:0;top:0;bottom:0;font-size:16px;margin:auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;text-shadow:0 0 1px rgba(50,50,50,0.75)}.cover{width:400px;height:400px;background-color:rgba(50,50,50,.75);margin:10px auto;border:solid 2px #fff;box-shadow:0 0 5px #000;-webkit-transition:0.25s width linear,0.25s height linear;-o-transition:0.25s width linear,0.25s height linear;transition:0.25s width linear,0.25s height linear;margin:20px auto 10px}.cover_preload,.background_preload{position:absolute}.info ul{list-style:none;padding:0;margin:0;text-align:center}.info ul li{padding:5px 0;user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;line-height:1em;overflow:hidden;height:1em;white-space:nowrap;text-overflow:ellipsis;transition:0.25s all linear}.title{font-size:2em}.control{font-size:3em;text-align:center;font-family:moefm-html5-icomoon;/*pointer-events:none*/}.control>span:not([hidden]){cursor:pointer;pointer-events:auto;display:inline-block;width:1.1em;height:1.1em;line-height:1.1em;text-align:left;overflow:hidden;white-space:nowrap;padding:0 5px;letter-spacing:0.1em;transition:0.25s all linear}.control>span:hover{text-shadow:0 0 2px #000}.control>span[meow]{color:#F00}.control>span.c_volume:hover{width:3.5em}.control>span.c_volume:hover .c_volume_range{width:100px;opacity:1}.control>span.c_volume_icon{display:inline-block;width:1.1em}.control2{text-align:center;font-family:moefm-html5-icomoon;position:absolute;z-index:1;cursor:pointer}.control2>span{opacity:0;font-size:200px;padding:100px;background:rgba(0,0,0,0.5);position:absolute;transition:0.25s all linear;text-shadow:0 0 5px #FFF}.control2:hover>span{opacity:1}.control2>span.c_play{opacity:1}.c_volume_range{height:20px;width:0px;margin:0;padding:0;opacity:0;-webkit-appearance:none;-webkit-transition:0.25s all linear;-o-transition:0.25s all linear;transition:0.25s all linear;outline:none;position:absolute;margin-left:5px;margin-top:15px;background:none}.c_volume_range::-webkit-slider-container{-webkit-appearance:none;height:2em}.c_volume_range::-webkit-slider-runnable-track{-webkit-appearance:none;background:#000;box-shadow:0 0 1px #000}.c_volume_range::-webkit-slider-thumb{-webkit-appearance:none;background:#FFF;border:1px #000 solid;border-radius:0;width:10px;height:20px}.c_volume_range::-moz-range-track{background:#000;height:20px;box-shadow:0 0 1px #000}.c_volume_range::-moz-range-thumb{background:#FFF;border-radius:0;width:10px;height:20px}.c_volume_range::-ms-track{background:#000;height:20px;box-shadow:0 0 1px #000}.c_volume_range::-ms-thumb{background:#FFF;border-radius:0;width:10px;height:20px}.c_volume_range::-ms-fill-lower{background:#000}.c_volume_range[disabled]{opacity:0.75;pointer-events:none}.timeline{position:fixed;top:0;left:0;width:100%;height:20px;font-size:12px;line-height:20px;background:rgba(0,0,0,0.5);color:#fff;z-index:100;-webkit-transition:0.25s all linear;-o-transition:0.25s all linear;transition:0.25s all linear;box-shadow:0 0 2px rgba(0,0,0,0.5)}.timeline_current_time,.timeline_duration_time{z-index:105;position:fixed;pointer-events:none;transition:0.25s all linear}.timeline_current_time{left:5px}.timeline_duration_time{right:5px}.timeline_current,.timeline_duration{left:0px;height:20px;position:fixed;top:0;-webkit-transition:0.25s all linear;-o-transition:0.25s all linear;transition:0.25s all linear;pointer-events:none}.timeline_duration{background:rgba(255,255,255,0.5);z-index:101}.timeline_current{background:rgba(0,0,0,0.5);z-index:102}footer{background:rgba(0,0,0,0.5);position:fixed;bottom:0;left:0;width:100%;height:20px;font-size:12px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;color:#FFF;/*pointer-events:none;*/text-shadow:0 0 2px #000;-webkit-transition:0.25s all linear;-o-transition:0.25s all linear;transition:0.25s all linear;box-shadow:0 0 2px rgba(0,0,0,0.5)}footer a,footer span{display:inline-block;padding:0 5px;color:#FFF;text-decoration:none;cursor:pointer;pointer-events:auto;transition:0.25s all ease-out}footer a:hover,footer span:hover{background-color:rgba(255,255,255,0.5);color:#FFF;transition:0.25s all ease-out}.link_left{position:fixed;height:20px;line-height:20px;padding-left:10px;left:0;bottom:0;transition:0.25s all linear}.link_right{position:fixed;height:20px;line-height:20px;padding-right:10px;right:0;bottom:0;transition:0.25s all linear}.link_right_user{display:inline}.link_right_user_btn>div a{display:block;height:16.66667px;line-height:16.66667px}aside{width:200px;font-size:12px;position:fixed;height:100px;right:-180px;top:50%;margin-top:-50px;/*top:0;bottom:0;left:auto;margin:auto;*/background-color:rgba(0,0,0,0.5);-webkit-transition:0.25s all ease-in;-o-transition:0.25s all ease-in;transition:0.25s all ease-in;box-shadow:0 0 2px rgba(0,0,0,0.5)}aside:hover{right:0;-webkit-transition:0.25s all ease-out;-o-transition:0.25s all ease-out;transition:0.25s all ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}aside ul{margin:0;padding:0;opacity:0;;-webkit-transition:0.25s all ease-in;-o-transition:0.25s all ease-in;transition:0.25s all ease-in;pointer-events:none}aside:hover ul{opacity:1;-webkit-transition:0.25s all ease-out;-o-transition:0.25s all ease-out;transition:0.25s all ease-out;pointer-events:auto}aside li{height:25px;line-height:25px;list-style:none;padding-left:24px;color:#FFF;-webkit-transition:0.25s all ease-in;-o-transition:0.25s all ease-in;transition:0.25s all ease-in;cursor:pointer;background-repeat:no-repeat no-repeat;background-position:4px center;background-image:none;margin-left:200px}aside:hover li{margin-left:0px}aside li:hover{background-color:rgba(255,255,255,0.5);transition:0.25s all ease-out;-webkit-transition:0.25s all ease-out;-o-transition:0.25s all ease-out}aside .aside_album{background-image:url(http://moe.fm/public/images/fm/fav_music_gray.png)}aside .aside_song{background-image:url(http://moe.fm/public/images/fm/fav_love_gray.png)}aside .aside_radio{background-image:url(http://moe.fm/public/images/fm/fav_star_gray.png)}aside .aside_random{background-image:url(http://moe.fm/public/images/fm/fav_magnifier_gray.png)}.share_panel,.setting_background_panel{background:rgba(255,255,255,0.5);box-shadow:0 0 0 5000px rgba(0,0,0,0.5);border-radius:2px;padding:20px;width:200px;height:100px;position:absolute;top:0;bottom:0;left:0;right:0;z-index:201;margin:auto;text-align:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;max-width:90%;max-height:90%}.setting_background_panel{width:600px;height:400px}.share_panel button,.setting_background_panel button{margin:6px;font-size:14px}.setting_background_panel textarea{width:100%;height:350px;background-color:rgba(255,255,255,0.5)}.share_panel_background,.setting_background_panel_background{width:100%;height:100%;position:fixed;z-index:200}.share_buttons{display:block;margin:5px}.share_buttons .share-button{opacity:0.6;-webkit-transition:0.25s opacity ease-in;-o-transition:0.25s opacity ease-in;transition:0.25s opacity ease-in;display:inline-block}.share_buttons .share-button:hover{opacity:1;-webkit-transition:0.25s opacity ease-out;-o-transition:0.25s opacity ease-out;transition:0.25s opacity ease-out;}.error_notification{position:fixed;right:10px;padding:5px;bottom:0px;box-shadow:0 0 1px 5px rgba(0,0,0,0.5);background:rgba(0,0,0,0.5);font-size:12px;color:#fff;opacity:0;-webkit-transition:0.25s all linear;-o-transition:0.25s all linear;transition:0.25s all linear;pointer-events:none}.cover_loading_notification{width:100%;height:100%;background:rgba(0,0,0,0.5);color:#FFF;opacity:0;text-shadow:0 0 2px #FFF;pointer-events:none;transition:0.25s all linear}a{color:#000}@media all and (min-width:500px) and (max-width:600px),all and (min-height:450px) and (max-height:600px){section{width:500px;height:400px;font-size:14px}.cover{width:250px;height:250px;margin:5px auto}.info ul{margin:5px 0}.c_volume_range{max-width:80px;height:20px;margin-top:8px}.control2>span{font-size:150px;padding:50px}}@media all and (min-width:500px) and (min-height:200px) and (max-height:450px),all and (max-width:500px) and (max-height:299px){section{width:500px;height:165px;font-size:14px}.cover{width:150px;height:150px;float:left;margin:5px}.info ul{margin:1em 0}.c_volume{max-width:3em}.c_volume_range{max-width:50px;height:14px;margin-top:10px}.c_volume_range::-webkit-slider-container,.c_volume_range::-webkit-slider-runnable-track,.c_volume_range::-webkit-slider-thumb{height:1em}.c_volume_range::-moz-range-track,.c_volume_range::-moz-range-thumb{height:1em}.control>span{font-size:32px}.control2>span{font-size:90px;padding:30px}}@media all and (max-height:200px){section{width:400px;height:105px;font-size:12px}.cover{width:100px;height:100px;margin:0;float:left}.info ul{margin:0}.info ul li{padding:4px 2px}.c_volume{max-width:3em}.c_volume_range{max-width:40px;height:14px;margin-top:5px}.c_volume_range::-webkit-slider-container,.c_volume_range::-webkit-slider-runnable-track,.c_volume_range::-webkit-slider-thumb{height:1em}.c_volume_range::-moz-range-track,.c_volume_range::-moz-range-thumb{height:1em}.control>span{font-size:24px}.control2>span{font-size:50px;padding:25px}}@media all and (max-height:150px){.timeline,.timeline>*{top:-20px!important}footer,footer>*{bottom:-20px!important}aside{right:-200px}aside,footer,.timeline{box-shadow:none}}@media all and (max-width:500px) and (min-height:300px){section{width:300px;height:330px;font-size:12px}.cover{width:200px;height:200px;margin:5px auto}.control>span{font-size:24px}.c_volume_range{max-width:50px;height:14px;margin-top:0px}.control{font-size:1em}.control2>span{font-size:120px;padding:40px}.c_volume_range::-webkit-slider-container,.c_volume_range::-webkit-slider-runnable-track,.c_volume_range::-webkit-slider-thumb{height:1em}.c_volume_range::-moz-range-track,.c_volume_range::-moz-range-thumb{height:1em}.link_left{-webkit-transform:translateX(-300px);transform:translateX(-300px)}}@media all and (max-width:500px) and (max-height:380px) and (min-height:300px){section{height:270px}.cover{width:150px;height:150px}.control2>span{font-size:90px;padding:30px}.info ul li{padding:4px}}@media all and (-ms-high-contrast: active), (-ms-high-contrast: none){.c_volume_range{margin-left:-10px;box-shadow:0 0 1px #000}}';
document.head.appendChild(stylesheet);
document.body.innerHTML='<section><audio autoplay="true" class="audio"></audio><div class="cover"><div class="control2"><span class="c_play" title="播放" hidden="hidden">播</span><span class="c_pause" title="暂停">停</span></div><img class="cover_preload" width="0" height="0"><div class="cover_loading_notification"></div></div><div class="info"><ul><li class="title">Title</li><li class="artist">Artist</li><li class="album">Album</li></ul></div><div class="control"><span class="c_previous" title="上一曲">上</span><span class="c_next" title="下一曲">下</span><span class="c_like" title="喜欢">藏</span><span class="c_dislike" title="抛弃">弃</span><span class="c_volume" title="音量"><span class="c_volume_icon">大</span><input class="c_volume_range" type="range"></span><span class="c_share" title="分享">享</span></div><div class="timeline"><div class="timeline_duration"></div><div class="timeline_current"></div><div class="timeline_duration_time"></div><div class="timeline_current_time"></div></div></section><aside><ul><li class="aside_album">我收藏的专辑</li><li class="aside_song">我喜欢的曲目</li><li class="aside_radio">我收藏的电台</li><li class="aside_random">魔力播放</li></ul></aside><footer><div class="link_left"><a href="http://moe.fm/" target="_blank">电台首页</a><a href="http://moe.fm/listen">开始聆听</a><a href="http://moe.fm/explore" target="_blank">发现音乐</a><a href="http://moe.fm/about/client" target="_blank">客户端</a><a href="http://moefou.org/group/moefm" target="_blank">电台小组</a></div><div class="link_right"><!--<span class="link_setting">设置</span>--><span class="link_setting_background">设置背景</span><div class="link_right_user"></div></div><img class="background_preload" width="0" height="0" alt=""></footer>';
var setting=JSON.parse(localStorage.getItem('moefm-html5-setting'))||{},
audio=document.getElementsByClassName('audio')[0],
cover=document.getElementsByClassName('cover')[0],
cover_preload=document.getElementsByClassName('cover_preload')[0],
cover_loading_notification=document.getElementsByClassName('cover_loading_notification')[0],
title=document.getElementsByClassName('title')[0],
artist=document.getElementsByClassName('artist')[0],
album=document.getElementsByClassName('album')[0],
c_play=document.getElementsByClassName('c_play')[0],
c_pause=document.getElementsByClassName('c_pause')[0],
c_previous=document.getElementsByClassName('c_previous')[0],
c_next=document.getElementsByClassName('c_next')[0],
c_like=document.getElementsByClassName('c_like')[0],
c_dislike=document.getElementsByClassName('c_dislike')[0],
c_volume=document.getElementsByClassName('c_volume')[0],
c_volume_icon=document.getElementsByClassName('c_volume_icon')[0],
c_volume_range=document.getElementsByClassName('c_volume_range')[0],
c_share=document.getElementsByClassName('c_share')[0],
timeline=document.getElementsByClassName('timeline')[0],
timeline_duration=document.getElementsByClassName('timeline_duration')[0],
timeline_current=document.getElementsByClassName('timeline_current')[0],
timeline_duration_time=document.getElementsByClassName('timeline_duration_time')[0],
timeline_current_time=document.getElementsByClassName('timeline_current_time')[0],
link_right_user=document.getElementsByClassName('link_right_user')[0],
aside_album=document.getElementsByClassName('aside_album')[0],
aside_song=document.getElementsByClassName('aside_song')[0],
aside_radio=document.getElementsByClassName('aside_radio')[0],
aside_random=document.getElementsByClassName('aside_random')[0],
background_preload=document.getElementsByClassName('background_preload')[0],
link_setting_background=document.getElementsByClassName('link_setting_background')[0],
playlist=[],
playlist_fetching=0,
count=-1,
volume=setting.volume||80,
next=0,
url_data,
cover_retry=0,
p=0,
background_list=setting.background||[],
background_count_time,
background_count_time_value=0;
function audio_play(c){
if(c==null)c=1;
if(count<playlist.length-1){
count+=c;
audio.src=playlist[count].url;
update_info();
if(count>playlist.length-5)update_playlist(null,false);
}
else update_playlist(null,false);
}
function update_info(){
cover_retry=0;
if(cover_preload.src!=playlist[count].cover.large){
cover_loading_notification.style.opacity=1;
}
cover_preload.src=playlist[count].cover.large;
if(c_like.hasAttribute('meow'))c_like.removeAttribute('meow');
if(c_dislike.hasAttribute('meow'))c_dislike.removeAttribute('meow');
if(location.search.indexOf('music=')>=0?location.search.split('music=')[1].split('&')[0].indexOf(playlist[count].wiki_id)<0:
(location.search.indexOf('song=')>=0?location.search.split('song=')[1].split('&')[0].indexOf(playlist[count].sub_id)<0:
location.search.indexOf('radio=')<0)){
window.history.replaceState(null,'','/listen?song='+playlist[count].sub_id);
}
if(playlist[count].sub_title){
title.setAttribute('title',playlist[count].sub_title);
title.innerHTML=playlist[count].sub_title;
document.title=playlist[count].sub_title+' | 萌否电台';
}
else{
title.innerHTML='';
document.title='收听音乐 | 萌否电台';
}
if(playlist[count].artist){
artist.innerHTML=playlist[count].artist;
artist.setAttribute('title',playlist[count].artist);
}
else artist.innerHTML='';
if(playlist[count].wiki_title){
album.innerHTML=playlist[count].wiki_title;
album.setAttribute('title',playlist[count].wiki_title);
}
else album.innerHTML='';
if(playlist[count].fav_sub){
if(playlist[count].fav_sub.fav_type==1)c_like.setAttribute('meow','1');
else c_dislike.setAttribute('meow','1');
}
if(playlist[count].fav_wiki){
if(playlist[count].fav_wiki.fav_type==1)album.innerHTML='(♥) '+playlist[count].wiki_title||' ';
}
}
function update_error(t,c){
var div=document.createElement('div');
div.className='error_notification';
switch(t){
case 'audio':
context='播放音频时发生错误<br>'+c;
case 'log':
context='记录播放历史失败<br>'+c;
break;
case 'fav':
context='添加收藏/抛弃记录失败<br>'+c;
break;
case 'playlist':
context='获取播放列表失败<br>'+c;
break;
case 'cover':
context='获取专辑图片失败<br>'+c;
break;
case 'background':
context='获取背景图片失败<br>'+c;
break;
default:
context=c;
}
div.innerHTML=context;
document.body.appendChild(div);
div.style.opacity=1;
div.style.bottom='30px';
setTimeout(function(){
div.style.opacity=0;
div.style.bottom='0px';
setTimeout(function(){
div.parentElement.removeChild(div);
},1000);
},5000);
}
function update_log(){
if(typeof is_login!='undefined'&&is_login==true){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(JSON.parse(xhr.responseText).status==false){
update_error('log',JSON.parse(xhr.responseText).msg);
}
}
else if(xhr.responseText){
update_error('log',JSON.parse(xhr.responseText).response.error.message);
}
else{
update_error('log','XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
}
}
}
xhr.open('GET','http://moe.fm/ajax/log?log_obj_type=sub&log_type=listen&obj_type=song&obj_id='+playlist[count].sub_id+'&_='+new Date().getTime());
xhr.send();
}
else update_error('log','您尚未登录，请先登录......');
}
function update_fav(t,d){
if(typeof is_login!='undefined'&&is_login==true){
var xhr=new XMLHttpRequest(),
f=new FormData();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(JSON.parse(xhr.responseText).status==false){
update_error('fav',JSON.parse(xhr.responseText).msg);
}
else{
switch(t){
case 1:
switch (d){
case 1:
c_like.removeAttribute('meow');
playlist[count].fav_sub=null;
break;
case 0:
c_like.setAttribute('meow','1');
playlist[count].fav_sub={};
playlist[count].fav_sub.fav_type=1;
break;
}
break;
case 2:
switch (d){
case 1:
c_dislike.removeAttribute('meow');
playlist[count].fav_sub=null;
break;
case 0:
c_dislike.setAttribute('meow','1');
playlist[count].fav_sub={};
playlist[count].fav_sub.fav_type=2;
break;
}
break;
}
}
}
else if(xhr.responseText){
update_error('fav',JSON.parse(xhr.responseText).response.error.message);
}
else{
update_error('fav','XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
}
}
}
f.append('fav_data[fav_type]',t);
f.append('fav_data[obj_id]',playlist[count].sub_id);
f.append('fav_data[obj_type]','song');
f.append('fav_data[delete]',d);
xhr.open('POST','http://moe.fm/ajax/fav?_='+new Date().getTime());
xhr.send(f);
}
else update_error('fav','您尚未登录，请先登录......');
}
function update_playlist(d,k){
if(playlist_fetching==0){
var is_update=1;
if(d!=null){
url_data=d;
is_update=0;
count=-1;
if(/\d+/.test(d))p=1;
}
playlist_fetching=1;
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(JSON.parse(xhr.responseText).playlist){
playlist_fetching=0;
//count=-1;
if(k==false&&is_update==1){
for(var i=0,j=JSON.parse(xhr.responseText).playlist;i<j.length;i++){playlist.push(j[i]);}
if(JSON.parse(xhr.responseText).info.may_have_next==true)p++;
else{
p=0;
url_data=null;
}
}
else{
playlist=JSON.parse(xhr.responseText).playlist;
if(JSON.parse(xhr.responseText).info.may_have_next==true)p++;
else{
p=0;
url_data=null;
}
}
if(k!=false){
audio_play();
}
}
else if(JSON.parse(xhr.responseText).response.error){
update_error('playlist',JSON.parse(xhr.responseText).response.error.message);
}
}
else if(xhr.responseText){
update_error('playlist',JSON.parse(xhr.responseText).response.error.message);
}
else{
update_error('playlist','XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
}
}
}
if(url_data==null)xhr.open('GET','http://moe.fm/listen/playlist?share_buttons=1&perpage=30&_='+new Date().getTime());
else xhr.open('GET','http://moe.fm/listen/playlist?share_buttons=1&perpage=30&page='+p+'&'+url_data+'&_='+new Date().getTime());
xhr.send();
}
}
function update_volume_icon(v){
if(v>66)c_volume_icon.innerHTML='大';
else if(v>33)c_volume_icon.innerHTML='中';
else c_volume_icon.innerHTML='小';
}
function update_background(){
if(background_list.length==0){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
background_list=JSON.parse(xhr.responseText).background_list;
update_background();
}
else{
update_error('background','获取背景图片列表失败<br>XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
}
}
}
xhr.open('GET','http://ext.ccloli.com/moe-fm/html5/background/');
xhr.send();
}
else{
var num=parseInt(Math.random()*(background_list.length-1));
background_preload.src=background_list[num];
//setTimeout(function(){update_background()},60000);
}
}
function update_background_count(v){
if(v==1){
background_count_time=setInterval(function(){
if(background_count_time_value>=60){
update_background();
background_count_time_value=0;
}
else{
background_count_time_value++;
}
},1000);
}
else clearInterval(background_count_time);
}
function share(){
var div=document.createElement('div'),
div2=document.createElement('div');
div.className='share_panel';
div2.className='share_panel_background';
div2.title='点击黑色区域以退出';
div.innerHTML='<button onclick="var p=prompt(\'请按下 Ctrl + C 以复制，点击确定可跳转至该页面，点击取消返回。\',\''+playlist[count].sub_url+'#'+playlist[count].sub_title+' | 萌否电台\');if(p!=null)window.open(\''+playlist[count].sub_url+'\',\'_blank\')">复制当前曲目地址</button><button onclick="var p=prompt(\'请按下 Ctrl + C 以复制，点击确定可跳转至该页面，点击取消返回。\',\''+playlist[count].wiki_url+'#'+playlist[count].wiki_title+' | 萌否电台\');if(p!=null)window.open(\''+playlist[count].wiki_url+'\',\'_blank\')">复制当前专辑地址</button><span class="share_buttons">'+playlist[count].share_buttons+'</span>';
document.body.appendChild(div);
document.body.appendChild(div2);
div2.addEventListener('click',function(){
div.parentElement.removeChild(div);
div2.parentElement.removeChild(div2);
})
}
audio.addEventListener('play',function(){
c_play.setAttribute('hidden','hidden');
c_pause.removeAttribute('hidden');
update_info();
})
audio.addEventListener('pause',function(){
c_pause.setAttribute('hidden','hidden');
c_play.removeAttribute('hidden');
})
audio.addEventListener('timeupdate',function(){
if(!isNaN(audio.duration)){
timeline_current.style.width=(audio.currentTime/audio.duration)*100+'%';
if(audio.buffered.length>0)timeline_duration.style.width=(audio.buffered.end(audio.buffered.length-1).toFixed(2))/(audio.duration.toFixed(2))*100+'%';
timeline_current_time.innerHTML=parseInt(audio.currentTime/60)+':'+(parseInt(audio.currentTime)%60<10?'0'+parseInt(audio.currentTime)%60:parseInt(audio.currentTime)%60);
timeline_duration_time.innerHTML=parseInt(audio.duration/60)+':'+(parseInt(audio.duration)%60<10?'0'+parseInt(audio.duration)%60:parseInt(audio.duration)%60);
}
})
audio.addEventListener('error',function(){
var context;
switch (audio.error.code){
case 1:
context='MEDIA_ERR_ABORTED（文件在取回时被用户中止）';
break;
case 2:
context='MEDIA_ERR_NETWORK（文件在下载时发生错误）';
break;
case 3:
context='MEDIA_ERR_DECODE（文件在解码时发生错误）';
break;
case 4:
context='MEDIA_ERR_SRC_NOT_SUPPORTED（不支持的音频格式）';
break;
default:
context='MEDIA_ERR_UNKNOWN（未知错误，错误代码：'+audio.error.code+'）';
}
switch (audio.networkState){
case 0:
context+='<br>NETWORK_EMPTY（音频尚未初始化）';
break;
case 1:
context+='<br>NETWORK_IDLE（音频已缓存）';
break;
case 2:
context+='<br>NETWORK_LOADING（浏览器正在下载数据）';
break;
case 3:
context+='<br>NETWORK_NO_SOURCE（未找到音频来源）';
break;
default:
context+='<br>NETWORK_UNKNOWN（未知错误，错误代码：'+audio.error.code+'）';
}
update_error('audio',context);
audio_play();
})
audio.addEventListener('ended',function(){
if(next==0)update_log();
else next=0;
audio_play();
})
cover_preload.addEventListener('load',function(){
cover.style.backgroundImage='url('+playlist[count].cover.large+')';
cover_loading_notification.style.opacity=0;
})
cover_preload.addEventListener('error',function(){
if(cover_retry<3){
update_error('cover','正在重试加载......');
cover_preload.src=playlist[count].cover.large;
cover_retry++;
}
else{
update_error('cover','超过最大重新加载次数限制');
cover_retry=0;
}
})
c_play.addEventListener('click',function(){audio.play();})
c_pause.addEventListener('click',function(){audio.pause();})
c_previous.addEventListener('click',function(){
if(count>0){
next=1;
count-=2;
audio_play();
}
})
c_next.addEventListener('click',function(){
next=1;
audio_play();
})
c_like.addEventListener('click',function(){
if(c_like.hasAttribute('meow')){
update_fav(1,1);
}
else{
update_fav(1,0);
}
})
c_dislike.addEventListener('click',function(){
if(c_dislike.hasAttribute('meow')){
update_fav(2,1);
}
else{
update_fav(2,0);
}
})
c_volume_icon.addEventListener('click',function(){
if(c_volume_range.hasAttribute('disabled')){
c_volume_range.removeAttribute('disabled');
c_volume_range.style.opacity=1;
audio.volume=volume/100;
update_volume_icon(volume);
}
else{
volume=audio.volume*100;
c_volume_icon.innerHTML='静';
c_volume_range.setAttribute('disabled','disabled');
c_volume_range.style.opacity=0.75;
audio.volume=0;
}
})
c_volume_range.addEventListener('change',function(){
volume=c_volume_range.value;
audio.volume=volume/100;
update_volume_icon(volume);
setting.volume=volume;
localStorage.setItem('moefm-html5-setting',JSON.stringify(setting));
})
c_share.addEventListener('click',function(){share();})
timeline.addEventListener('mouseup',function(event){
audio.currentTime=(event.clientX/document.body.clientWidth)*audio.duration;
})
aside_album.addEventListener('click',function(){p=0;update_playlist('fav=music');})
aside_song.addEventListener('click',function(){p=0;update_playlist('fav=song');})
aside_radio.addEventListener('click',function(){p=0;update_playlist('fav=radio');})
aside_random.addEventListener('click',function(){p=0;url_data=null;update_playlist();})
background_preload.addEventListener('load',function(){document.documentElement.style.backgroundImage='url('+background_preload.src+')';})
background_preload.addEventListener('error',function(){
update_error('background','获取图片时发生错误');
update_background();
})
link_setting_background.addEventListener('click',function(){
var div=document.createElement('div'),
div2=document.createElement('div'),
t=document.createElement('textarea'),
b=document.createElement('button');
div.className='setting_background_panel';
div2.className='setting_background_panel_background';
div2.title='点击黑色区域以退出';
b.innerHTML='确定';
t.setAttribute('title','请在文本框内输入图片地址，以回车间隔，一行一个');
t.setAttribute('autofocus','autofocus');
div.appendChild(t);
div.appendChild(b);
if(background_list.length!=0)t.value=background_list.join('\n');
document.body.appendChild(div);
document.body.appendChild(div2);
div2.addEventListener('click',function(){
div.parentElement.removeChild(div);
div2.parentElement.removeChild(div2);
})
b.addEventListener('click',function(){
var l=t.value.split('\n'),
r=[];
for(var i=0;i<l.length;i++){
if(l!='')r.push(l[i]);
}
background_list=r;
div2.click();
update_background();
setting.background=r;
localStorage.setItem('moefm-html5-setting',JSON.stringify(setting));
})
})
if(location.search.indexOf('song')>=0)update_playlist(location.search.match(/song=[0-9,]*/)[0]);
else if(location.search.indexOf('music')>=0)update_playlist(location.search.match(/music=[0-9,]*/)[0]);
else if(location.search.indexOf('radio')>=0)update_playlist(location.search.match(/radio=[0-9,]*/)[0]);
else update_playlist();
c_volume_range.value=volume;
audio.volume=volume/100;
update_volume_icon(volume);
update_background();
update_background_count(1);
window.addEventListener('keydown',function(e){
switch(e.keyCode){
case 32:
audio.paused==false?audio.pause():audio.play();
break;
case 39:
next=1;
audio_play();
break;
case 38:
c_like.click();
break;
case 40:
c_dislike.click();
break;
case 37:
next=1;
count-=2;
audio_play();
break;
}
})
window.addEventListener('focus',function(){
update_background_count(1);
})
window.addEventListener('blur',function(){
update_background_count(0);
})
if(typeof is_login!='undefined'&&is_login==true){
var user_btn=document.createElement('span');
user_btn.innerHTML=user;
user_btn.className='link_right_user_btn';
link_right_user.appendChild(user_btn);
var user_pan=document.createElement('div');
user_pan.innerHTML=user_panel;
user_pan.style.cssText='position:fixed;background:rgba(0,0,0,0.5);bottom:0px;right:10px;opacity:0';
user_pan.setAttribute('hidden','hidden');
user_btn.appendChild(user_pan);
user_btn.addEventListener('mouseover',function(){
user_pan.removeAttribute('hidden');
user_pan.style.opacity=1;
user_pan.style.bottom='20px';
})
user_btn.addEventListener('mouseout',function(){
user_pan.setAttribute('hidden','hidden');
user_pan.style.opacity=0;
user_pan.style.bottom='0px';
})
}
else{
link_right_user.innerHTML='<a class="right" target="_blank" href="http://moefou.org/register?redirect=http%3A%2F%2Fmoe.fm%2Flogin">注册</a><a class="right" href="http://moe.fm/login">登入</a>';
document.getElementsByTagName('aside')[0].setAttribute('hidden','hidden');
}