代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<!--
__ __ ______ __ __ _ _ _______ __ __ _ _____ ____ Last updated_on 2016.06.11_
| \/ | | ____| \/ | | | | |__ __| \/ | | | ___| | _ \ |_| | |
| \ / | ___ ___| |__ | \ / | | |__| | | | | \ / | | | |__ | |_) | __ ___ _ ___ ___ _| |__
| |\/| |/ _ \ / _ \ __| | |\/| | | __ | | | | |\/| | | |___ \ | ___/ V _\/ _ \ | |/ _ \/ __|_ _/
| | | | (_) | __/ | | | | | | | | | | | | | | | |___ ___) | | | | / | (_) | | | __/ |__ | |
|_| |_|\___/ \___|_| |_| |_| |_| |_| |_| |_| |_|_____|____/ |_| |_| \___/__| |\___/\___| | |__
Just a Net Radio based on Moefou Open API // (c) 864907600cc (ccloli) // License: GPLv3 \___/ V 1.1.11 \___/
-->
<html>
<head>
<meta charset="utf-8">
<title>MoeFM HTML5 Project (Beta)</title>
<meta name="description" content="MoeFM HTML5 Project // 萌否电台 HTML5 版本（非官方） // Just a Net Radio based on Moefou Open API // (c) 864907600cc (ccloli) // github.com/ccloli/moefm-html5-project">
<link id="favicon" href="http://moefou.org/public/images/fm/favicon.ico" rel="icon" type="image/x-icon">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--[if lte IE 9]>
<script>
alert('很抱歉，看起来您的浏览器版本过老了……\n请使用 IE 10 及以上版本，建议使用 IE 11');
window.location.href='http://moe.fm/listen'+window.location.search;
</script>
<![endif]-->
<style>
@font-face{
font-family:moefm-html5-icomoon;
src:url(moefm-html5-icomoon.ttf?v=1.2)
}
article,aside,dialog,footer,header,div,footer,nav,figure,menu,main{display:block}
[hidden]{display:none!important}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background-color:transparent;zoom:1}
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}
::-webkit-selection{background:rgba(0,0,0,0.5)}
:-moz-selection{background:rgba(0,0,0,0.5)}
::-moz-selection{background:rgba(0,0,0,0.5)}
::-ms-selection{background:rgba(0,0,0,0.5)}
::selection{background:rgba(0,0,0,0.5)}
main{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);display: block}
.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;position:relative;overflow:hidden}
.cover_preload,.cover_preload2,.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;left:0;top:0;}
.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:hover .c_volume_range[disabled]{opacity:0.75;pointer-events:none}
.timeline{position:fixed;top:0;left:0;width:100%;height:24px;font-size:12px;line-height:24px;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:10px}
.timeline_duration_time{right:10px}
.timeline_current,.timeline_duration{left:0px;height:24px;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:24px;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:24px;line-height:24px;padding-left:10px;left:0;bottom:0;transition:0.25s all linear}
.link_left > a {float: left;}
.link_right{position:fixed;height:24px;line-height:24px;padding-right:10px;right:0;bottom:0;transition:0.25s all linear}
.link_right > * {float: left;}
.link_right_user{display:inline}
.link_right_user_btn>div{height:0px;overflow:hidden;opacity:0;bottom:0px;-webkit-transition:0.25s all ease-in;-o-transition:0.25s all ease-in;transition:0.25s all ease-in;right:10px;background:rgba(0,0,0,0.5);position:fixed;cursor:auto}
.link_right_user_btn:hover>div{height:auto;overflow:hidden;opacity:1;bottom:24px;-webkit-transition:0.25s all ease-out;-o-transition:0.25s all ease-out;transition:0.25s all ease-out}
.link_right_user_btn>div a{display:block;height:16px;line-height:16px}
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);z-index:100}
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)}
.panel{background:rgba(255,255,255,0.75);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,.download_panel button{margin:6px;font-size:14px}
.setting_background_panel textarea{width:100%;height:350px;background-color:rgba(255,255,255,0.5)}
.panel_background{width:100%;height:100%;position:fixed;z-index:200}
.share_buttons{display:block;margin:5px}
.share_buttons .share-button{height:16px;width:16px;background:transparent url('http://moe.fm/public/images/fm/share_button.png?v=20120520') no-repeat;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;}
.share_buttons .share-button.share-sina{background-position:0 0}
.share_buttons .share-button.share-tencent{background-position:0 -32px}
.share_buttons .share-button.share-douban{background-position:0 -16px}
.share_buttons .share-button.share-renren{background-position:0 -48px}
.share_buttons .share-button.share-twitter{background-position:0 -128px}
.share_buttons .share-button.share-163{background-position:0 -64px}
.share_buttons .share-button.share-googleplus{background-position:0 -144px}
.share_buttons .share-button.share-dianbo{background-position:0 -160px}
.login_panel{width:500px;height:150px;text-align: center;}
.about_panel{font-size:12px;width:500px;height:200px}
.穿越_panel{width:500px;height:200px}
.notification_panel{width:400px;text-align:left;height:150px;font-size:14px;}
.download_panel{font-size:14px}
.download_panel button{width:85px;}
.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 screen and (min-width:500px) and (max-width:600px),screen and (min-height:450px) and (max-height:600px){
main{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 screen and (min-width:500px) and (min-height:200px) and (max-height:450px),screen and (max-width:500px) and (max-height:299px){
main{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-traconsumerKey,.c_volume_range::-webkit-slider-thumb{height:1em}
.c_volume_range::-moz-range-traconsumerKey,.c_volume_range::-moz-range-thumb{height:1em}
.control>span{font-size:32px}
.control2>span{font-size:90px;padding:30px}
}
@media screen and (max-height:200px){
main{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-traconsumerKey,.c_volume_range::-webkit-slider-thumb{height:1em}
.c_volume_range::-moz-range-traconsumerKey,.c_volume_range::-moz-range-thumb{height:1em}
.control>span{font-size:24px}
.control2>span{font-size:50px;padding:25px}
}
@media screen and (max-height:150px){
.timeline,.timeline>*{top:-24px!important}
footer,footer>*{bottom:-24px!important}
aside{right:-200px}
aside,footer,.timeline{box-shadow:none}
}
@media screen and (max-width:500px) and (min-height:300px){
main{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-traconsumerKey,.c_volume_range::-webkit-slider-thumb{height:1em}
.c_volume_range::-moz-range-traconsumerKey,.c_volume_range::-moz-range-thumb{height:1em}
}
@media screen and (max-width:500px) and (max-height:380px) and (min-height:300px){
main{height:270px}
.cover{width:150px;height:150px}
.control2>span{font-size:90px;padding:30px}
.info ul li{padding:4px}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
.c_volume_range{margin-left:-10px;box-shadow:0 0 1px #000}
}
@media screen and (max-width:500px){
.link_left{-webkit-transform:translateX(-300px);transform:translateX(-300px)}
}
</style>
</head>
<body>
<main>
<audio class="audio" autoplay="autoplay"></audio>
<div class="cover"><div class="control2"><span class="c_play" title="播放">播</span><span class="c_pause" title="暂停" hidden="hidden">停</span></div><img class="cover_preload" width="0" height="0"><img class="cover_preload2" width="0" height="0"><div class="cover_loading_notification"></div></div>
<div class="info">
<ul>
<li class="title">Loading...</li>
<li class="artist"></li>
<li class="album"></li>
</ul>
</div>
<div class="control"><!--<span class="c_play" title="播放">播</span><span class="c_pause" title="暂停" hidden="hidden">停</span>--><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_download" hidden="hidden">存</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>
</main>
<aside hidden="hidden">
<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://moefm.ccloli.com">开始聆听</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_about">关于本站</span>
<span class="link_setting_background">设置背景</span>
<div class="link_right_user"></div>
</div>
<img class="background_preload" width="0" height="0">
</footer>
<script src="sha1.js"></script>
<script src="oauth.js"></script>
<script>
'use strict';
var audio_pretest=document.createElement('audio');
if(audio_pretest.canPlayType('audio/mpeg')==''){
alert('很抱歉，看起来您的浏览器不支持 MPEG (MP3) 文件……\n支持 MPEG 编码的浏览器请参考 http://caniuse.com/#feat=mpeg4');
window.location.href='http://moe.fm/listen'+window.location.search;
throw 'It seems that the browser doesn\'t support MPEG media...';
}
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_preload2=document.getElementsByClassName('cover_preload2')[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_download=document.getElementsByClassName('c_download')[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],
link_about=document.getElementsByClassName('link_about')[0],
playlist=[],
playlist_fetching=0,
count=-1,
volume=setting.volume||80,
next=0,
url_data,
cover_retry=0,
login_retry=0,
p=0,
background_list=setting.background||[],
background_count_time,
background_count_time_value=0,
loop=0,
is_login=false,
is_ended=false,
touch_X,
touch_Y,
network_paused = false,
connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection,
ignore_connection = -1,
// Thanks to QB
generateOauthUrl = function (url, options) {
var accessor = {
consumerKey: options.consumerKey,
consumerSecret: options.consumerSecret
};
if ('token' in options) {
accessor['token'] = options.token;
accessor['tokenSecret'] = options.tokenSecret;
}
var message = {
action: url,
method: options.method,
parameters: {}
};
if ('verifier' in options) {
message.parameters['oauth_verifier'] = options.verifier;
}
if('callback' in options){
message.parameters['oauth_callback'] = options.callback;
}
OAuth.completeRequest(message, accessor);
OAuth.SignatureMethod.sign(message, accessor);
return url + (url.indexOf('?')>=0?'&':'?') + OAuth.formEncode(message.parameters);
},
consumerKey='\u0061\u0065\u0063\u0065\u0065\u0035\u0064\u0030\u0062\u0030\u0035\u0034\u0061\u0035\u0062\u0039\u0033\u0065\u0036\u0039\u0037\u0035\u0061\u0062\u0061\u0064\u0063\u0066\u0037\u0064\u0062\u0032\u0030\u0035\u0032\u0036\u0034\u0062\u0065\u0035\u0031',
consumerSecret='\u0065\u0037\u0038\u0034\u0061\u0066\u0061\u0033\u0062\u0062\u0030\u0066\u0034\u0030\u0034\u0038\u0062\u0066\u0037\u0064\u0039\u0030\u0066\u0061\u0066\u0033\u0033\u0039\u0030\u0036\u0037\u0034',
requestToken = localStorage.getItem('requestToken'),
requestTokenSecret = localStorage.getItem('requestTokenSecret'),
requestTokenTimedOut = localStorage.getItem('requestTokenTimedOut'),
accessToken = localStorage.getItem('accessToken'),
accessTokenSecret = localStorage.getItem('accessTokenSecret'),
options;
/*if(audio.canPlayType('audio/mpeg')==''){
alert('很抱歉，看起来您的浏览器不支持 MPEG (MP3) 文件……\n支持 MPEG 编码的浏览器请参考 http://caniuse.com/#feat=mpeg4');
//alert('Sorry, but seems that your browser doesn\'t support MPEG audio (mp3 file)...\nThe list of browsers which support MPEG could be seen at http://caniuse.com/#feat=mpeg4\nThe window will be closed...');
window.close();
}*/
function audio_play(c){
if (ignore_connection !== 1) {
if (connection){
if (connection.type === 'cellular' || connection.type == 'wimax') {
if (ignore_connection === 0) return update_error('network', '用户不允许在移动网络下播放');
else if (ignore_connection === -1) {
if (confirm('您正在使用移动网络收听电台，这将可能会产生移动数据流量费用，是否继续收听？')){
ignore_connection = 1;
}
else {
update_error('network', '用户不允许在移动网络下播放');
return ignore_connection = 0;
}
}
}
else if (connection.type === 'none') return update_error('network', '无网络连接，请检查网络连接状态');
}
}
if(c==null)c=1;
if(count<playlist.length-1){
count+=c;
audio.src=playlist[count].url;
audio.load();
audio.play();
update_info();
if(count>playlist.length-5&&loop==0)update_playlist(null,false);
}
else if(loop==1){
count=0;
audio.src=playlist[count].url;
update_info();
}
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,'','?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'),
context;
div.className='error_notification';
switch(t){
case 'audio':
context='播放音频时发生错误<br>'+c;
break;
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;
case 'login':
context='获取登录数据失败<br>'+c;
break;
case 'download':
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(is_login==true){
var xhr=new XMLHttpRequest(),
options={
method:'get',
consumerKey: consumerKey,
consumerSecret: consumerSecret,
token:accessToken,
tokenSecret:accessTokenSecret,
//obj_id:playlist[count].sub_id
},
url='http://moe.fm/ajax/log?api=json&log_obj_type=sub&log_type=listen&obj_type=song&obj_id='+playlist[count].sub_id+'&_='+new Date().getTime();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = JSON.parse(xhr.responseText);
if(data.status==false){
update_error('log',data.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',generateOauthUrl(url,options));
xhr.send();
}
}
function update_fav(t,d){
var xhr=new XMLHttpRequest(),
url='http://api.moefou.org/fav/'+(d==0?'add':'delete')+'.json?fav_type='+t+'&fav_obj_type=song&fav_obj_id='+playlist[count].sub_id+'&_='+new Date().getTime(),
options={
method:'get',
consumerKey: consumerKey,
consumerSecret: consumerSecret,
token:accessToken,
tokenSecret:accessTokenSecret,
//fav_type:d,
//fav_obj_type:'song',
//fav_obj_id:playlist[count].sub_id
};
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;
if(c_dislike.hasAttribute('meow'))c_dislike.removeAttribute('meow');
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;
if(c_like.hasAttribute('meow'))c_like.removeAttribute('meow');
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);
}
}
}
xhr.open('GET',generateOauthUrl(url,options));
xhr.send();
}
function update_playlist(d,k,m){
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;
}
//if(m!=null&&m==true)is_update=0;
if (m) {
url_data = 'song=' + playlist.map(function(elem){
return elem.sub_id;
}).join(',');
p = 1;
}
playlist_fetching=1;
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = JSON.parse(xhr.responseText);
if(data.playlist){
playlist_fetching=0;
//count=-1;
if(k==false&&is_update==1){
//playlist=/*playlist.concat(*/JSON.parse(xhr.responseText).playlist/*)*/;
for(var i=0,j=data.playlist;i<j.length;i++){playlist.push(j[i]);}
if(data.info.may_have_next==true || url_data.indexOf('fav=') < 0)p++;
else{
p=0;
url_data=null;
}
//count=-1;
}
else{
playlist=data.playlist;
if(data.info.may_have_next==true || url_data.indexOf('fav=') < 0)p++;
else{
p=0;
url_data=null;
}
//count=-1;
}
if(k!=false){
audio_play();
}
}
else if(data.response.playlist){
if (m) {
if (data.response.information.may_have_next==true || url_data.indexOf('fav=') < 0) {
p++;
url='http://moe.fm/listen/playlist?api=json&share_buttons=1&perpage=30&page='+p+'&'+url_data+'&_='+new Date().getTime();
xhr.open('GET',generateOauthUrl(url,options));
xhr.send();
}
else {
playlist = data.response.playlist;
playlist_fetching = 0;
update_info();
}
return;
}
playlist_fetching=0;
//count=-1;
if(k==false&&is_update==1){
//playlist=/*playlist.concat(*/JSON.parse(xhr.responseText).playlist/*)*/;
for(var i=0,j=data.response.playlist;i<j.length;i++){playlist.push(j[i]);}
if(data.response.information.may_have_next==true || url_data.indexOf('fav=') < 0)p++;
else{
p=0;
url_data=null;
}
//count=-1;
}
else{
playlist=data.response.playlist;
if(data.response.information.may_have_next==true || url_data.indexOf('fav=') < 0)p++;
else{
p=0;
url_data=null;
}
//count=-1;
}
if(k!=false){
audio_play();
}
}
else if(data.response.error){
update_error('playlist',data.response.error.message);
}
}
else if(xhr.status==401){
check_login();
is_login=false;
playlist_fetching=0;
update_playlist(d);
}
else if(xhr.responseText){
playlist_fetching=0;
update_error('playlist',JSON.parse(xhr.responseText).response.error.message);
}
else{
playlist_fetching=0;
update_error('playlist','XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
}
}
}
if(is_login==true){
var options={
method:'get',
consumerKey: consumerKey,
consumerSecret: consumerSecret,
token:accessToken,
tokenSecret:accessTokenSecret
};
if(url_data==null)var url='http://moe.fm/listen/playlist?api=json&share_buttons=1&perpage=30&_='+new Date().getTime();
else var url='http://moe.fm/listen/playlist?api=json&share_buttons=1&perpage=30&page='+p+'&'+url_data+'&_='+new Date().getTime();
//console.log(url);
//console.log(generateOauthUrl(url,options));
xhr.open('GET',generateOauthUrl(url,options));
}
else{
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 preurl = '/background/';
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 if (preurl === '/background/') {
preurl = 'http://moefm.ccloli.com/background/';
xhr.open('GET', preurl);
xhr.send();
}
else{
update_error('background','获取背景图片列表失败<br>XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
}
}
}
xhr.open('GET', preurl);
xhr.send();
}
else{
var num=parseInt(Math.random()*(background_list.length-1));
background_preload.src=background_list[num];
}
}
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 panel';
div2.className='share_panel_background 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);
});
}
function download(){
var div=document.createElement('div'),
div2=document.createElement('div'),
xhr=new XMLHttpRequest();
div.className='download_panel panel';
div2.className='download_panel_background panel_background';
div2.title='点击黑色区域以退出';
div.innerHTML='正在获取该曲目支持的码率......';
var filename=playlist[count].sub_title+'.mp3';
document.body.appendChild(div);
document.body.appendChild(div2);
div2.addEventListener('click',function(){
div.parentElement.removeChild(div);
div2.parentElement.removeChild(div2);
})
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data=JSON.parse(xhr.responseText);
var download_str='请选择欲下载的文件<br>';
if(data.error!=0)return update_error('download',data.error_msg);
for(var i in data.response){
if(data.response[i].exist==1){
download_str+='<a href="'+data.response[i].url+'" download="'+filename+'"><button>'+i+' Kbps</button></a>';
}
}
div.innerHTML=download_str;
}
else update_error('download','抓取数据出现错误<br>XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
}
}
xhr.open('GET','/hqac/?url='+encodeURIComponent(audio.src));
xhr.send();
}
function set_login(){
link_right_user.innerHTML='<a class="right" target="_blank" href="http://moefou.org/register?redirect=' + encodeURIComponent(location.href) + '">注册</a><a class="right">登入</a>';
document.getElementsByTagName('aside')[0].setAttribute('hidden','hidden');
document.getElementsByClassName('c_like')[0].setAttribute('hidden','hidden');
document.getElementsByClassName('c_dislike')[0].setAttribute('hidden','hidden');
link_right_user.getElementsByTagName('a')[1].addEventListener('click',function(){login()})
//start();
}
function check_login(){
accessToken=localStorage.getItem('accessToken');
accessTokenSecret=localStorage.getItem('accessTokenSecret');
link_right_user.innerHTML='正在获取用户信息......';
var xhr=new XMLHttpRequest(),
url='http://api.moefou.org/user/detail.json',
options={
method:'get',
consumerKey: consumerKey,
consumerSecret: consumerSecret,
token:accessToken,
tokenSecret:accessTokenSecret
};
xhr.onreadystatechange=function(){
//console.log(xhr)
if(xhr.readyState==4){
if(xhr.status==200){
is_login=true;
var data=JSON.parse(xhr.responseText).response.user;
link_right_user.innerHTML='';
var user_btn=document.createElement('span');
user_btn.innerHTML=data.user_nickname;
user_btn.className='link_right_user_btn';
link_right_user.appendChild(user_btn);
var user_pan=document.createElement('div');
user_pan.innerHTML='<div style="padding:6px"><div style="float:left;width:48px;height:48px"><img class="avatar" style="width:48px;height:48px" src="'+data.user_avatar.small+'" alt=""></div><div style="padding-left:6px;margin-left:48px;width:108px"><a title="个人主页" href="'+data.user_fm_url+'" target="_blank">我的主页</a><a target="_blank" class="external" href="http://moefou.org/user/setting">个人设定</a><a onclick="logout()">登出</a><div style="clear:both"></div></div><div style="clear:both"></div></div>';
/*user_pan.setAttribute('hidden','hidden');*/
user_btn.appendChild(user_pan);
if(document.getElementsByTagName('aside')[0].hasAttribute('hidden'))document.getElementsByTagName('aside')[0].removeAttribute('hidden');
if(document.getElementsByClassName('c_like')[0].hasAttribute('hidden'))document.getElementsByClassName('c_like')[0].removeAttribute('hidden');
if(document.getElementsByClassName('c_dislike')[0].hasAttribute('hidden'))document.getElementsByClassName('c_dislike')[0].removeAttribute('hidden');
if(playlist.length==0)start();
else update_playlist(null, false, true);
}
else if(xhr.status==401){
update_error('login','用户信息验证失败，可能是因为您曾经取消授权，请尝试重新授权登录。');
set_login();
start();
}
else{
login_retry++;
if(login_retry<3){
update_error('login','无法获取用户信息，可能是网络问题或服务器故障，正在尝试重新连接......<br>XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
check_login();
}
else{
update_error('login','无法获取用户信息，可能是网络问题或服务器故障，请稍候刷新重试......<br>XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
set_login();
start();
}
}
}
}
xhr.open('GET',generateOauthUrl(url,options));
xhr.send();
}
function login(){
var div=document.createElement('div'),
div2=document.createElement('div');
div.className='login_panel panel';
div2.className='login_panel_background panel_background';
div2.title='点击黑色区域以退出';
div.innerHTML='您即将使用您的萌否账号授权登录本站点，授权过程均在萌否服务器完成，本站点不会记录您的密码，但您授权后的 access token 数据将以可能不安全的方式储存在浏览器中。<br>如果您之前已授权却仍被要求重新授权，那么可能是您目前在另一台计算机上，或您曾经清除过浏览器数据集而误清理了 access token。<br><button class="login_confirm" disabled="disabled">我已了解，开始授权</button>';
document.body.appendChild(div);
document.body.appendChild(div2);
var fetch_oauth_token = function () {
var url='http://api.moefou.org/oauth/request_token',
options={
method: 'get',
consumerKey: consumerKey,
consumerSecret: consumerSecret,
callback: location.origin + location.pathname + 'oauth_callback.html'
},
xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data=xhr.responseText;
requestToken=data.replace(/.*\boauth_token=([a-z0-9]+).*/, '$1'),
requestTokenSecret=data.replace(/.*\boauth_token_secret=([a-z0-9]+).*/, '$1');
requestTokenTimedOut = new Date().getTime() + 3000000;
window.localStorage.setItem('requestToken', requestToken);
window.localStorage.setItem('requestTokenSecret', requestTokenSecret);
window.localStorage.setItem('requestTokenTimedOut', requestTokenTimedOut);
//authorize();
if(document.getElementsByClassName('login_confirm')[0]&&document.getElementsByClassName('login_confirm')[0].hasAttribute('disabled'))document.getElementsByClassName('login_confirm')[0].removeAttribute('disabled');
}
else{
update_error('login','XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
}
}
}
xhr.open('GET',generateOauthUrl(url,options));
xhr.send();
}
var authorize = function(){
var url='http://api.moefou.org/oauth/authorize',
options={
method:'get',
consumerKey:consumerKey,
consumerSecret:consumerSecret,
token:requestToken,
tokenSecret:requestTokenSecret
},
re_url=generateOauthUrl(url, options);
window.open(re_url,'_blank');
div.innerHTML='请在新弹出的页面中完成授权。<br>如果浏览器未弹出授权页面，请 <a href="'+re_url+'" target="_blank"><button>点击此处</button></a> 打开授权页面。<br>请于 1 小时内完成授权，授权完成后此页面会自动更新。';
window.onstorage = function (event){
if (event.key == 'verifier') {
window.onstorage = null;
verify(event.newValue);
localStorage.removeItem(verifier);
}
}
}
var verify = function (verifier){
div.innerHTML='正在获取 OAuth 授权数据......';
var url='http://api.moefou.org/oauth/access_token',
options={
method:'get',
consumerKey:consumerKey,
consumerSecret:consumerSecret,
token:requestToken,
tokenSecret:requestTokenSecret,
verifier:verifier
},
xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data=xhr.responseText,
accessToken=data.replace(/.*\boauth_token=([a-z0-9]+).*/,'$1'),
accessTokenSecret=data.replace(/.*\boauth_token_secret=([a-z0-9]+).*/,'$1');
localStorage.setItem('accessToken',accessToken);
localStorage.setItem('accessTokenSecret',accessTokenSecret);
check_login();
div.parentElement.removeChild(div);
div2.parentElement.removeChild(div2);
}
else {
div.innerHTML='验证登录失败，请重试......';
update_error('login','XHR Ready State: '+xhr.readyState+'<br>XHR Status: '+xhr.statusText);
}
localStorage.removeItem('requestToken');
localStorage.removeItem('requestTokenSecret');
localStorage.removeItem('requestTokenTimedOut');
localStorage.removeItem('verifier');
requestTokenTimedOut = 0;
}
}
xhr.open('GET',generateOauthUrl(url,options));
xhr.send();
}
document.getElementsByClassName('login_confirm')[0].addEventListener('click', authorize);
if (requestTokenTimedOut - new Date() < 0) fetch_oauth_token();
if (localStorage.getItem('verifier') && requestToken) verify(localStorage.getItem('verifier'));
div2.addEventListener('click',function(){
if(confirm('您确认要取消登录吗？')){
div.parentElement.removeChild(div);
div2.parentElement.removeChild(div2);
}
});
}
function logout(){
var c=confirm('您即将登出，在下次登录时需要重新授权，是否继续？');
if(c==true){
localStorage.removeItem('accessToken');
localStorage.removeItem('accessTokenSecret');
set_login();
/*var c=confirm('数据已清除，您已成功登出本站。\n是否需要前往萌否开放平台取消授权？');
if(c==true)window.open('http://open.moefou.org/apps/authorized','authorized');*/
}
}
function about(){
var div=document.createElement('div'),
div2=document.createElement('div');
div.className='about_panel panel';
div2.className='about_panel_background panel_background';
div2.title='点击黑色区域以退出';
div.innerHTML='<strong>MoeFM HTML5 Project (Beta)</strong><br>萌否电台 HTML5 版本（非官方）<br>作者：<a href="http://moefou.org/home/864907600cc" target="_blank">864907600cc</a><br>致谢：<a href="http://blog.likelikeslike.com/" target="_blank">Jak Wings</a>（提供萌否 OAuth 认证 example）、<a href="http://moefou.org/home/zanko" target="_blank">zanko</a>（提供 API 使用支持）<br>桌面设备测试：Chrome 32/33 (Windows 7 64-bit/Ubuntu 13.10 64-bit)、Firefox 25 (Windows 7 64-bit)、Internet Explorer (Windows 7 64-bit)<br>移动设备测试：Android 自带浏览器（Android 4.1/4.3）、UC 浏览器（Android 2.2/4.3，不完全支持）、海豚浏览器（Android 4.3）<br>Powered by <a href="http://moe.fm" target="_blank">Moe.FM</a> | <a href="http://moefm.ccloli.com">Homepage</a> | <a href="https://github.com/ccloli/moefm-html5-project">GitHub</a><br><p><a href="http://moefou.org/group/moefm_html5_project" target="_blank">项目小组</a> <a href="http://moefou.org/topic/1730" target="_blank">Bug 反馈</a></p>';
document.body.appendChild(div);
document.body.appendChild(div2);
div2.addEventListener('click',function(){
div.parentElement.removeChild(div);
div2.parentElement.removeChild(div2);
})
}
function 穿越OAO(){
if(document.getElementsByClassName('穿越_panel')[0])return false;
audio.pause();
var div=document.createElement('div'),
div2=document.createElement('div');
div.className='穿越_panel panel';
div2.className='穿越_panel_background panel_background';
div2.title='点击黑色区域以退出';
var qr_path = '/qr.php';
var dest_path = location.origin + location.pathname + '/?song='+playlist[count].sub_id+'#'+(accessToken!=null?('accessToken='+accessToken+',accessTokenSecret='+accessTokenSecret)+',':'')+'currentTime='+audio.currentTime;
div.innerHTML='扫描二维码，在移动设备上继续收听，无需重新登录<br><img src="' + qr_path + '?data='+encodeURIComponent(dest_path)+'" alt="" width="180" height="180">';
div.getElementsByTagName('img')[0].onerror = function(){
if (qr_path === '/qr.php') {
qr_path = 'http://moefm.ccloli.com/qr.php';
this.setAttribute('src', qr_path + '?data=' + encodeURIComponent(dest_path));
}
else {
var node = document.createElement('div');
node.innerHTML = '载入二维码失败，请将以下 URL 用其他方式发送到移动设备<br><input type="text" value="' + dest_path + '">';
div.replaceChild(node, this);
}
}
document.body.appendChild(div);
document.body.appendChild(div2);
div2.addEventListener('click',function(){
div.parentElement.removeChild(div);
div2.parentElement.removeChild(div2);
audio.play();
})
}
function start(){
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();
}
audio.addEventListener('play',function(){
is_ended=false;
c_play.setAttribute('hidden','hidden');
c_pause.removeAttribute('hidden');
update_info();
});
audio.addEventListener('pause',function(){
if(is_ended!=true){
c_pause.setAttribute('hidden','hidden');
c_play.removeAttribute('hidden');
}
});
audio.addEventListener('progress', function(){
var buffered = audio.buffered;
var duration = audio.duration;
if(buffered.length>0 && !isNaN(duration))timeline_duration.style.width=(buffered.end(buffered.length-1).toFixed(2))/(duration.toFixed(2))*100+'%';
});
audio.addEventListener('timeupdate',function(){
var duration = audio.duration;
var buffered = audio.buffered;
var currentTime = audio.currentTime;
if(!isNaN(duration)){
timeline_current.style.width=(currentTime/duration)*100+'%';
if(buffered.length>0)timeline_duration.style.width=(buffered.end(buffered.length-1).toFixed(2))/(duration.toFixed(2))*100+'%';
timeline_current_time.innerHTML=parseInt(currentTime/60)+':'+(parseInt(currentTime)%60<10?'0'+parseInt(currentTime)%60:parseInt(currentTime)%60);
timeline_duration_time.innerHTML=parseInt(duration/60)+':'+(parseInt(duration)%60<10?'0'+parseInt(duration)%60:parseInt(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+='NETWORK_UNKNOWN（未知错误，错误代码：'+audio.error.code+'）';
}
update_error('audio',context);
audio_play();
});
audio.addEventListener('ended',function(){
is_ended=true;
if (!navigator.onLine) return network_paused = true;
if(next==0)update_log();
next=0;
audio_play();
});
cover_preload.addEventListener('load',function(){
cover.style.backgroundImage='url('+playlist[count].cover.large+')';
cover_loading_notification.style.opacity=0;
if (playlist[count + 1]) cover_preload2.setAttribute('src', playlist[count + 1].cover.large);
});
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(){
if (ignore_connection !== 1) {
if (connection){
if (connection.type === 'cellular' || connection.type == 'wimax') {
if (ignore_connection === 0) return update_error('network', '用户不允许在移动网络下播放');
else if (ignore_connection === -1) {
if (confirm('您正在使用移动网络收听电台，这将可能会产生移动数据流量费用，是否继续收听？')){
ignore_connection = 1;
}
else {
update_error('network', '用户不允许在移动网络下播放');
ignore_connection = 0;
}
}
}
else if (connection.type === 'none' && (audio.buffered.end(audio.buffered.length-1).toFixed(2))/(audio.duration.toFixed(2)) < 1) return update_error('network', '无网络连接，请检查网络连接状态');
}
}
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');
audio.volume=volume/100;
update_volume_icon(volume);
}
else{
volume=audio.volume*100;
c_volume_icon.innerHTML='静';
c_volume_range.setAttribute('disabled','disabled');
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_download.addEventListener('click',function(){download();});
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','获取背景图片时发生错误');});
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 panel';
div2.className='setting_background_panel_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));
})
});
link_about.addEventListener('click', about);
album.addEventListener('click',function(){
if(confirm('播放专辑『'+playlist[count].wiki_title+'』？')==true)update_playlist('music='+playlist[count].wiki_id);
});
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;
if (count > 0) {
count-=2;
audio_play();
}
break;
case 13:
穿越OAO();
break;
}
});
document.body.addEventListener('touchstart',function(event){
if(typeof event.changedTouches!='undefined'){
if (event.changedTouches.length > 1) {
touch_X = -1;
touch_Y = -1;
return;
}
var touchobj=event.changedTouches[0];
//event.preventDefault();
}
else{
return false;
}
touch_X=touchobj.pageX;
touch_Y=touchobj.pageY;
});
document.body.addEventListener('touchend',function(event){
if(typeof event.changedTouches!='undefined'){
if (event.changedTouches.length > 1 || touch_X < 0) return;
var touchobj=event.changedTouches[0];
//event.preventDefault();
}
else{
return false;
}
var touchf_X=touchobj.pageX;
var touchf_Y=touchobj.pageY;
var touche_X=touchf_X-touch_X;
var touche_Y=touchf_Y-touch_Y;
if(touche_X>0&&Math.abs(touche_X*10)>=document.body.clientWidth&&Math.abs(touche_X)>Math.abs(touche_Y*3)){
//next=1;
audio_play();
}
else if(touche_X<0&&Math.abs(touche_X*10)>=document.body.clientWidth&&Math.abs(touche_X)>Math.abs(touche_Y*3)){
if(count>0){
//next=1;
count-=2;
audio_play();
}
}
/*else if(touche_Y<0&&Math.abs(touche_Y*10)>=document.body.clientHeight&&Math.abs(touche_Y)>Math.abs(touche_X*3)){
if(c_like.hasAttribute('meow')){
update_fav(1,1);
}
else{
update_fav(1,0);
}
}
else if(touche_Y>0&&Math.abs(touche_Y*10)>=document.body.clientHeight&&Math.abs(touche_Y)>Math.abs(touche_X*3)){
if(c_dislike.hasAttribute('meow')){
update_fav(2,1);
}
else{
update_fav(2,0);
}
}*/
});
document.body.onoffline = function () {
update_error('network', '网络状态异常，请检查网络连接');
network_paused = true;
};
document.body.ononline = function () {
update_error('network', '网络已恢复连接');
if (network_paused) {
update_log();
next=0;
audio_play();
network_paused = false;
}
};
if (connection) {
connection.addEventListener('typechange', function(){
if (connection.type === 'cellular' || connection.type == 'wimax') {
if (ignore_connection === 0) return update_error('network', '用户不允许在移动网络下播放');
else if (ignore_connection === -1) {
if (confirm('您正在使用移动网络收听电台，这将可能会产生移动数据流量费用，是否继续收听？')){
ignore_connection = 1;
}
else {
return ignore_connection = 0;
}
}
}
else if (connection.type === 'none') return update_error('network', '无网络连接，请检查网络连接状态');
else if (ignore_connection === 1 && audio.paused) audio_play();
});
}
if(location.hash.indexOf('accessToken')>=0){
localStorage.setItem('accessToken',location.hash.match(/accessToken=([0-9a-f]{41})/)[1]);
localStorage.setItem('accessTokenSecret',location.hash.match(/accessTokenSecret=([0-9a-f]{32})/)[1]);
}
if(localStorage.getItem('accessToken'))check_login();
else{
set_login();
start();
}
if(location.hash.indexOf('currentTime')>=0){
audio.onplay=function(){
audio.currentTime=location.hash.match(/currentTime=([0-9.]+)/)[1];
audio.onplay=null;
}
}
if(navigator.userAgent.match(/Android|Silk|Mobile|Nexus|iPhone|iPad/)){
c_volume.setAttribute('hidden','hidden');
c_download.removeAttribute('hidden');
}
c_volume_range.value=volume;
audio.volume=volume/100;
update_volume_icon(volume);
if(location.hash.indexOf('background=0')<0){
update_background();
update_background_count(1);
window.addEventListener('focus',function(){
update_background_count(1);
});
window.addEventListener('blur',function(){
update_background_count(0);
});
}
if(location.hash.indexOf('loop=1')>=0){
loop=1;
}
if(!window.localStorage.getItem('notification')){
var div=document.createElement('div'),
div2=document.createElement('div');
div.className='notification_panel panel';
div2.className='notification_panel_background panel_background';
div2.title='点击黑色区域以退出';
div.innerHTML='现在您可以尝试使用手指滑动屏幕进行操作啦~~~ >w< <br><br>手势操作说明（仅支持可触摸设备）：<br> 1. 从左向右滑为播放下一曲；<br> 2. 从右向左滑为播放上一曲。';
document.body.appendChild(div);
document.body.appendChild(div2);
div2.addEventListener('click',function(){
div.parentElement.removeChild(div);
div2.parentElement.removeChild(div2);
});
window.localStorage.setItem('notification','1');
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手