268 lines
14 KiB
HTML
268 lines
14 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<meta content='{PE.Label id="取得META信息" siteConfig="true" metaType="keywords" /}' name="Keywords"/>
|
|
<meta content='{PE.Label id="取得META信息" siteConfig="true" metaType="description" /}' name="Description"/>
|
|
<title>音乐连播-{PE.SiteConfig.SiteTitle/}</title>
|
|
<link href="{PE.SiteConfig.SkinPath/}default.css" rel="stylesheet" type="text/css"/>
|
|
<link href="{PE.SiteConfig.SkinPath/}musicplayer.css" rel="stylesheet" type="text/css"/>
|
|
{PE.Label id="公共脚本" /}
|
|
<script type="text/javascript" src="{PE.SiteConfig.ApplicationPath/}JS/jquery.music.js"></script>
|
|
</head>
|
|
<body>
|
|
{PE.Label id="网站顶部"/}
|
|
<div class="wrapper">
|
|
<div id="main_bg">
|
|
<!--音乐播放器开始-->
|
|
<div class="player_interface" id="xMusicPlayerInterface">
|
|
<!--播放器容器开始-->
|
|
<div class="content">
|
|
<!--功能控制区开始-->
|
|
<div id="con_fun">
|
|
<div id="main_fun">
|
|
<!--播放器播放控制区域-->
|
|
<ul class="play_contros">
|
|
<li class="play_stoped"><a id="playStop" title="停止" href="#"></a></li>
|
|
<li class="play_prev"><a id="playPrev" title="上一首" href="#"></a></li>
|
|
<li class="play_play"><a id="playPlay" href="#"></a></li>
|
|
<li class="play_next"><a id="playNext" title="下一首" href="#"></a></li>
|
|
</ul>
|
|
<!--播放器音量控制-->
|
|
<span class="volume_controls">
|
|
<a class="volume_on" id="volumeMute" title="静音" href="#"></a>
|
|
<span class="volume_bar" id="volumeBar">
|
|
<span class="volume_status" id="volumeBarValue"style="width: 100%"></span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div id="eid_fun">
|
|
<!--正播放歌曲-->
|
|
<h3 class="tit_song">
|
|
<span id="songName">----</span> - <a id="songSinger">----</a></h3>
|
|
<!--播放器进度条控制-->
|
|
<span class="proc_controls" id="procBar">
|
|
<span class="proc_container">
|
|
<span class="proc_status" id="procStatus" style="width: 0.1%"></span>
|
|
</span>
|
|
</span>
|
|
<!--歌曲编辑-->
|
|
<ul class="song_info">
|
|
<li class="song_contros">
|
|
<a href="#" class="song_add" id="songAdd" title="添加">反选</a>
|
|
<a href="#" class="song_del" id="songDel" title="删除">删除</a>
|
|
<a href="#" class="song_favorite" id="songFavorite" title="收藏">收藏</a>
|
|
<a href="#" class="song_download" id="songDownload" title="下载">下载</a>
|
|
<a href="#" class="song_recommend" id="songRecommend" title="推荐">推荐</a>
|
|
<a href="#" class="song_comment" id="songComment" title="评论">评论</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="song_mode">
|
|
<!--播放器歌曲循环控制-->
|
|
<ul class="attach_contrls">
|
|
<li class="attach_random"><a id="random" title="随机播放" href="#"></a></li>
|
|
<li class="attach_all_repeat"><a class="actived" id="all" title="全部循环" href="#"></a></li>
|
|
<li class="attach_single_repeat"><a id="single" title="单曲循环" href="#"></a>
|
|
</li>
|
|
</ul>
|
|
<!--播放器时间显示-->
|
|
<span class="time_status"><span id="currentTime">00:00</span> / <span id="totalTime">
|
|
00:00</span></span>
|
|
</div>
|
|
</div>
|
|
<!--播放列表开始-->
|
|
<div id="song_list">
|
|
<ul id="songList">
|
|
</ul>
|
|
</div>
|
|
<!--歌词显示开始-->
|
|
<div id="lrc">
|
|
<div id="spe">
|
|
<h3 class="song_img fl">
|
|
<a>
|
|
<img id="songImg" class="hideme" alt="" src=""/></a></h3>
|
|
<ul id="spe_info">
|
|
<li class="song_name fl">播放热度：<span id="hits">0</span></li>
|
|
<li class="song_spe fl">专辑名称：<span id="albumName">未知</span></li>
|
|
</ul>
|
|
</div>
|
|
<ul id="lrc_dis">
|
|
</ul>
|
|
<ul id="lrc_bar">
|
|
<li id="lrc_dl"><a id="downloadLrc" href="#">歌词下载</a></li>
|
|
<li><a id="lrc_up" style="display:block; margin-left:22px; width:18px; height:18px;" href="#"> </a></li>
|
|
<li><a id="lrc_dn" style="display:block; margin-left:22px; width:18px; height:18px;" href="#"> </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--音乐列表结束-->
|
|
<div class="clear">
|
|
</div>
|
|
<span id="playerHolder"></span>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var api;
|
|
$(function() {
|
|
var list = {PE.Label id="生成音乐列表数据" itemIds="@Request_itemIds" /},
|
|
songList = $('#songList'), repeatbtn = $('.attach_contrls a'),songName = $('#songName'),inverse=$('#songAdd'),deleteSongs=$('#songDel'),
|
|
singer = $('#songSinger'),hits = $('#hits'),album = $('#albumName'),photo = $('#songImg'),
|
|
donwnSong = $('#songDownload'),downLrc=$('#lrc_dl'),share=$('#songRecommend'),favorite=$('#songFavorite'),comment=$('#songComment');
|
|
$('#con_fun a[href="#"]').focus(function () { $(this).blur();}).attr('href', 'javascript:void(0);');
|
|
api = $('#playerHolder').xMusicPlayer('api', {
|
|
enableLyric:true,
|
|
enableDebug:true,
|
|
lyricElement:'lrc_dis',
|
|
flashPath:'{PE.SiteConfig.SkinPath/}swf/musicplayer.swf',
|
|
controls: { playOrPause :'playPlay', stop: "playStop",next: 'playNext',prev: 'playPrev',loadBar: "procBar", playBar: "procStatus",volumeOff:'volumeMute' },
|
|
onReady:function() {
|
|
if (api.loadSongList(list) && api.loadFile('first')) {
|
|
createList(list);
|
|
api.playOrPause();
|
|
}
|
|
else {
|
|
alert('初始化错误！');
|
|
}
|
|
},
|
|
onPlay:function() {
|
|
bindListStyle();
|
|
setSongInfo();
|
|
songList.children().eq(api.context.currentIndex).css('background', 'url({PE.SiteConfig.SkinPath/}images/button.png) left -168px');
|
|
api.elements.playOrPause.parent().attr({ 'title': '暂停', 'className': 'play_pause' });
|
|
api.elements.stop.parent().attr('className', 'play_stop');
|
|
},
|
|
onPause:function() {
|
|
api.elements.playOrPause.parent().attr({ 'title': '播放', 'className': 'play_play' });
|
|
api.elements.stop.parent().attr('className', 'play_stoped');
|
|
},
|
|
onStop:function() {
|
|
api.elements.playOrPause.parent().attr({ 'title': '播放', 'className': 'play_play' });
|
|
api.elements.stop.parent().attr('className', 'play_stoped');
|
|
},
|
|
onVolumeChange:function() {
|
|
api.elements.volumeOff.attr({ 'title': api.context.isVolumeOff ? '开启声音' : '静音', 'className': api.context.isVolumeOff ? 'volume_mute' : 'volume_on' });
|
|
}
|
|
});
|
|
repeatbtn.click(function(){var self = $(this);api.setRepeat(self.attr('id'));setRepeatStyle(self);});
|
|
donwnSong.click(function(){window.open(api.context.currentLoadedSong.url);});
|
|
share.click(function(){});
|
|
inverse.click(function(){songList.find('input[type="checkbox"]').each(function(){this.checked = !this.checked;})});
|
|
favorite.click(function(){window.open('{PE.SiteConfig.ApplicationPath/}User/Content/Favorite.aspx?Action=add&Id=' + api.context.currentLoadedSong.id)});
|
|
comment.click(function(){window.open('{PE.SiteConfig.ApplicationPath/}ShowComment.aspx?id=' + api.context.currentLoadedSong.id)});
|
|
deleteSongs.click(function(){ songList.find('input:checked').each(function(i,n){
|
|
var id = $(n).next().attr('id').replace('id-', '');
|
|
if (api.context.currentLoadedSong.id == id) {
|
|
api.context.currentIndex -= 1
|
|
api.context.currentIndex == 0 ? api.context.currentIndex = -1 :api.context.currentIndex;
|
|
api.stop();
|
|
}
|
|
for (var i = 0; i < api.context.playList.length; i++) {
|
|
if (id == api.context.playList[i].id) {
|
|
api.context.playList.splice(i, 1);
|
|
}
|
|
}
|
|
$(this).parent().parent().remove();
|
|
if(!api.context.isPlaying){
|
|
api.next();
|
|
}
|
|
});
|
|
});
|
|
function setRepeatStyle(c) {
|
|
repeatbtn.removeClass('actived');
|
|
c.addClass('actived');
|
|
}
|
|
function setSongInfo(){
|
|
songName.text(api.context.currentLoadedSong.name);
|
|
singer.text(api.context.currentLoadedSong.singer);
|
|
album.text(api.context.currentLoadedSong.album);
|
|
photo.attr('src',api.context.currentLoadedSong.photo);
|
|
hits.text(api.context.currentLoadedSong.hits+1);
|
|
if(api.context.currentLoadedSong.lrc == ''){
|
|
$('#downloadLrc').attr('href','javascript:void(0)');
|
|
}else{
|
|
$('#downloadLrc').attr('href',api.context.currentLoadedSong.lrc);
|
|
}
|
|
$.get(siteSetup.sitePath + 'Common/GetHits.aspx?id=' + api.context.currentLoadedSong.id);
|
|
}
|
|
function createList(l) {
|
|
var output = '';
|
|
for (var i = 0; i < l.length; i++) {
|
|
output += '<li><span class="stime"><a title="' + l[i].singer + '" href="#">' + l[i].singer + '</a></span>';
|
|
output += '<span><input type="checkbox" value=""/><span id="id-' + l[i].id + '" class="title"> ' + l[i].name + ' </span> - ';
|
|
output += '<a title="详情" href="' + l[i].link + '">详情</a></span></li>';
|
|
}
|
|
songList.html(songList.html() + output);
|
|
songList.find('span.title').click(function(){
|
|
var id = $(this).attr('id').replace('id-','');
|
|
for(var i= 0; i < api.context.playList.length; i++){
|
|
if(id == api.context.playList[i].id){
|
|
api.context.currentIndex = i;
|
|
api.loadFile('single');
|
|
break;
|
|
}
|
|
}
|
|
api.playOrPause();
|
|
}).css('cursor','pointer');
|
|
bindListStyle();
|
|
}
|
|
function bindListStyle() {
|
|
songList.children().each(function (i) {
|
|
$(this).css('background', 0 === i % 2
|
|
? 'url({PE.SiteConfig.SkinPath/}images/button.png) left -120px'
|
|
: 'url({PE.SiteConfig.SkinPath/}images/button.png) left -144px')
|
|
})
|
|
}
|
|
function createSongs(ids) {
|
|
$.pe.ajax('accessLabel', { labelName: '生成音乐列表数据', params: { itemIds: ids }, success: function (response) {
|
|
var data = $(response).find('body').text();
|
|
}})
|
|
}
|
|
|
|
|
|
$('#lrc_up').mouseover(function() { api.scrollLyricUp();}).mouseout(function() {api.stopScrollLyric();});
|
|
$('#lrc_dn').mouseover(function() { api.scrollLyricDown();}).mouseout(function() {api.stopScrollLyric(); });
|
|
|
|
$('#songRecommend').click(function copyToClipboard() {
|
|
var txt = window.location.href;
|
|
if (window.clipboardData) {
|
|
window.clipboardData.clearData();
|
|
window.clipboardData.setData("Text", txt);
|
|
alert("本文链接地址复制成功！");
|
|
} else if (navigator.userAgent.indexOf("Opera") != -1) {
|
|
window.location = txt;
|
|
} else if (window.netscape) {
|
|
try {
|
|
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
|
|
} catch (e) {
|
|
alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");
|
|
return;
|
|
}
|
|
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
|
|
if (!clip)
|
|
return;
|
|
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
|
|
if (!trans)
|
|
return;
|
|
trans.addDataFlavor('text/unicode');
|
|
var str = new Object();
|
|
var len = new Object();
|
|
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
|
|
var copytext = txt;
|
|
str.data = copytext;
|
|
trans.setTransferData("text/unicode", str, copytext.length * 2);
|
|
var clipid = Components.interfaces.nsIClipboard;
|
|
if (!clip)
|
|
return false;
|
|
clip.setData(trans, null, clipid.kGlobalClipboard);
|
|
alert("本文链接地址复制成功！");
|
|
}
|
|
})
|
|
|
|
})
|
|
</script>
|
|
{PE.Label id="网站底部" /}
|
|
</body>
|
|
</html>
|