194 lines
6.7 KiB
HTML
194 lines
6.7 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<title>
|
|
</title>
|
|
<meta charset="UTF-8" />
|
|
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js">
|
|
</script>
|
|
<script type="text/javascript" src="jquery.jplayer.min.js">
|
|
</script>
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0;
|
|
padding: 0
|
|
}
|
|
div.openyy {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
font: 12px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;
|
|
overflow: hidden;
|
|
display: block;
|
|
width: 250px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
white-space: nowrap;
|
|
background-color: #FF6503;
|
|
color: #fff;
|
|
border-bottom: #C4753D 1px solid;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
text-shadow: 0-1px 0 rgba(0, 0, 0, .2);
|
|
font-size: 14px
|
|
}
|
|
.openyy span {
|
|
float: left;
|
|
margin-left: 10px;
|
|
width: 210px;
|
|
overflow: hidden;
|
|
text-align: left
|
|
}
|
|
#play {
|
|
width: 0;
|
|
height: 0;
|
|
border:10px solid transparent;
|
|
border-left: 15px solid #FFF;
|
|
float: right;
|
|
margin-top: 5px
|
|
}
|
|
#pause {
|
|
width: 5px;
|
|
height: 20px;
|
|
border-left: 5px solid #FFF;
|
|
border-right: 5px solid #FFF;
|
|
float: right;
|
|
margin-top: 5px;
|
|
margin-right: 10px
|
|
}
|
|
#progress {
|
|
height: 30px;
|
|
background: #FF8F00;
|
|
position: absolute;
|
|
opacity: 0.5;-moz-opacity: 0.5;
|
|
filter: alpha(opacity = 50)
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
var hash = location.hash.split('|');
|
|
if (hash.length == 3) {
|
|
var background = '#' + hash[1],
|
|
border = '#' + hash[2]
|
|
} else {
|
|
var background = '#' + hash[2],
|
|
border = '#' + hash[3]
|
|
}
|
|
$('.openyy').css({
|
|
'background': background,
|
|
'border-bottom-color': border
|
|
});
|
|
|
|
$('#progress').css({
|
|
'background': border
|
|
});
|
|
var song = hash[0].substr(1);
|
|
if (song.substring(0, 7) == "http://") {
|
|
var songs = new Array(hash[0].substr(1), hash[1]),
|
|
format = songs[0].split('.').pop();
|
|
$('#jplayer').jPlayer({
|
|
ready: function() {
|
|
switch (format) {
|
|
case 'wma':
|
|
$(this).jPlayer('setMedia', {
|
|
wma: songs[0]
|
|
});
|
|
break;
|
|
case 'ogg':
|
|
$(this).jPlayer('setMedia', {
|
|
ogg: songs[0]
|
|
});
|
|
break;
|
|
case 'ape':
|
|
$(this).jPlayer('setMedia', {
|
|
ape: songs[0]
|
|
});
|
|
break;
|
|
default:
|
|
$(this).jPlayer('setMedia', {
|
|
mp3: songs[0]
|
|
});
|
|
break
|
|
}
|
|
$('title').html(songs[1]);
|
|
$('.openyy span').html(songs[1])
|
|
},
|
|
preload: 'none',
|
|
ended: function() {
|
|
$('#pause').click();
|
|
$('#progress').width('0px')
|
|
},
|
|
swfPath: './',
|
|
supplied: 'mp3,wma,ogg,ape'
|
|
})
|
|
} else {
|
|
$.ajax({
|
|
url: 'http://imnerd.org/lab/player/apiv2.php?id=' + song,
|
|
type: 'GET',
|
|
dataType: 'jsonp',
|
|
async: false,
|
|
success: function(d) {
|
|
$('#jplayer').jPlayer({
|
|
ready: function() {
|
|
$(this).jPlayer('setMedia', {
|
|
mp3: d.location
|
|
});
|
|
$('title').html(d.title);
|
|
$('.openyy span').html(d.title);
|
|
$.ajax({
|
|
url: 'http://imnerd.org/lab/search/lyric.php?url=' + d.lyric,
|
|
type: 'GET',
|
|
dataType: 'jsonp',
|
|
async: false,
|
|
success: function(lrc) {
|
|
var m = 0;
|
|
$('#jplayer').bind($.jPlayer.event.timeupdate,
|
|
function(e) {
|
|
if (e.jPlayer.status.currentTime > lrc[m][0]) $('.openyy span').html(lrc[m][1]),
|
|
m++
|
|
})
|
|
}
|
|
})
|
|
},
|
|
ended: function() {
|
|
$('#pause').click();
|
|
$('#progress').width('0px')
|
|
},
|
|
preload: 'none',
|
|
swfPath: './',
|
|
supplied: 'mp3'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
$('#jplayer').bind($.jPlayer.event.timeupdate,
|
|
function(e) {
|
|
$('#progress').width(Math.round(e.jPlayer.status.currentPercentAbsolute / 100 * $('.openyy span').width()))
|
|
});
|
|
$('body').on('click', '#play',
|
|
function() {
|
|
$('#jplayer').jPlayer('play');
|
|
$(this).attr('id', 'pause')
|
|
});
|
|
$('body').on('click', '#pause',
|
|
function() {
|
|
$('#jplayer').jPlayer('pause');
|
|
$(this).attr('id', 'play')
|
|
})
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="openyy">
|
|
<div id="progress">
|
|
</div>
|
|
<div id="jplayer">
|
|
</div>
|
|
<span>
|
|
</span>
|
|
<div id="play"></div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |