This commit is contained in:
chorblack
194
XiaMiPlayer/jplayer/index.html
Normal file
194
XiaMiPlayer/jplayer/index.html
Normal file
@@ -0,0 +1,194 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user