<!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" />
<title>音乐播放器</title>
<link href="music.css" rel="stylesheet" type="text/css" /></head><body onload="on_music();">
<!--播放器模块 Start-->
<div id="vitoland_music">
<script>
//名称:音乐播放器
//版本:1.0
//作者:李振兴
//邮箱:[email protected]
//网址:http://www.vitoland.cn/
//完成时间:2010年5月17日
//使用须知:您需要按格式添加音乐,否则程序会出错
// a[编号接上一个]="歌曲名称";
// b[编号与a相同]="歌曲地址";var web_name='惊起一滩鸥鹭'; //你的网站名称,下面可关闭
var bfq_name='音乐播放器'; //播放器名称,下面可关闭
var bfq_btl_gg=0; //是否在浏览器标题栏显示播放信息,0表示否,1表示是
var stanley_music=0; //加载播放器时是否播放,0表示否,1表示是
var huanying='<b><font color=black>欢迎您来到'+web_name+',在下诚挚邀请您在这里多坐会儿。</font></b>';
// 上面设定为不播放时,这是在播放器面板上显示的欢迎词,可自行更改,支持简单的HTML代码function diag_list(){
xh=1; //播放列表下标
a=new Array();
b=new Array(); a[1]="超人不会飞 周杰伦";
b[1]="http://news.scuec.edu.cn/xzw/admin/music/cc715f386db7165412359fa2aca21399.mp3";
a[2]="长椅 刘若英";
b[2]="http://um.mofei.com.cn/shengkan/UploadFile/%E6%BD%AE%E6%B5%81%E9%9F%B3%E4%B9%90/%E9%95%BF%E6%A4%85.wma";
a[3]="指望 郁可唯";
b[3]="http://clubpic.vodone.com/attachments/2010/05/149156535_201005022133108175.mp3";
a[4]="偏食 杨丞琳";
b[4]="http://www.zunyun.com/music/10415/偏食.wma";
a[5]="勇敢爱 张靓颖";
b[5]="http://pic.evlife.com.cn/AdvFiles/MKT/TcMktImg/yga.wma";
a[6]="台湾心跳声 蔡依林";
b[6]="http://www.zunyun.com/music/10415/台湾心跳声.wma";
a[7]="take me to your heart";
b[7]="http://www.fyyzg.com/yg/up/updj/20091950958393.wma";
a[8]="快乐崇拜 潘玮柏";
b[8]="http://au.9you.com/download/song/12.mp3";
a[9]="一人一梦 张含韵";
b[9]="http://mat1.qq.com/musictop2/dq/0706/yirenyimeng.mp3";
a[10]="去爱吧 胡歌";
b[10]="http://124.115.215.215/bbmedia.qq.com/media/music/audio/200805/qabhg.mp3";
//在这里继续添加歌曲,请注意格式及序号连续
m=parseInt(a.length)-parseInt(1); //计算数组上标
for(var i=1;i<=m;i++){
list.innerHTML+="<div id=\"list_"+i+"\" class=\"list_n\" onclick=\"changemusic('"+b[i]+"','"+a[i]+"','"+i+"');\"\>"+a[i]+"</div\>";
}
}//-------------以下无需修改,否则程序会出问题。当然,如果您会JS,请无视这些提示--------------//
function on_music(){ //播放器初始化
vitoland_music.innerHTML="<table id='music_kz' cellspacing='0' cellpadding='0'><tr><td width='25' align='center'><input id='bf_zt' type='image' title='点击播放' src='images/play.png' onclick='play_pause();' /></td><td id='music_info' align='left' title='单击此处静音,再次单击恢复。' onclick='mute();'><div id='jindutiao'></div><div id='info'><marquee behavior='scroll' scrollamount='2' direction='left'><span id='music_name'></span><span id='jingyin'></span> <span id='time'></span></marquee></div><div id='hct'></div></td><td width='21px' align='center'><input type='image' title='播放列表' src='images/list.png' onclick=display:""; /></td><td width='22px' align='center'><input type='image' title='播放器视频区域' src='images/tv.png' onclick='music_tv();' /></td></tr></table><div id='list' style='display:none;'><div id='list_n' class='list_n'></div><div id='list_n' class='list_n' style='color:#FFC;'><span onclick='diag_user();'>添加歌曲</span> <span onclick='previous();'>上一曲</span> <span onclick='next();'>下一曲</span> <span id='dq_xh' onclick='music_xh();'>循环</span></div></div><div id='overlay' style='display:none;'></div><div id='music_tv' class='floatDiv' style='display:none;'><div class='divTitle'><div><font color='#000000'>视频区域 (双击图像,全屏观看。)</font></div></div><div class='divContent'><object id='stanley_music_name' width='320px' height='240px' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><param name='URL' value='' /><param name='autoStart' value='1' /><param name='loop' value='1' /><param name='uiMode' value='none' /></object></div><div class='divFoot'><input type='button' class='divButton' onclick='music_tv()'; value='关 闭' /></div></div><br /><br />"
diag_list();
dqxh=0;
if(stanley_music==1){changemusic(b[1],a[1],'1');}
if(stanley_music==0){music_name.innerHTML=huanying;}
}function changemusic(url,musicname,xuhao){ //将歌曲信息传递给播放器和显示在相关的层中
vara=musicname;
xh=xuhao;
music_name.innerText='连接歌曲 '+vara;
jingyin.innerText=time.innerText='';
document.getElementById('bf_zt').src='images/play.png';
document.getElementById('bf_zt').title='点击播放';
if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};
document.getElementById("stanley_music_name").url=url;
}
function bfq(){ //播放器主控程序
var bf_zt=document.getElementById('bf_zt');
if(stanley_music_name.playState==9){ //连接状态
if(bfq_btl_gg==1){window.document.title=web_name+'—连接歌曲—'+vara;};
time.innerText='连接歌曲 '+vara+' ……';
}
if(stanley_music_name.playState==6){ //缓冲状态
if(bfq_btl_gg==1){window.document.title=web_name+'—缓冲歌曲—'+vara;};
time.innerText='缓冲歌曲 '+vara+' ……';
}
if(stanley_music_name.playState==3){ // 播放状态
document.getElementById('jindutiao').style.width=parseInt((stanley_music_name.controls.currentPosition/stanley_music_name.currentMedia.duration)*117+'px');
time.innerText=stanley_music_name.controls.currentPositionString+' | '+stanley_music_name.currentMedia.durationString;
document.getElementById('hct').style.width=stanley_music_name.network.downloadProgress+'%';
bf_zt.src='images/pause.png';
bf_zt.title='点击暂停';
if(bfq_btl_gg==1){window.document.title=web_name+'—★ '+vara+' ★';};
music_name.innerText=vara;
}
if(stanley_music_name.playState==2){ //暂停状态
if(bfq_btl_gg==1){window.document.title=web_name+'—暂停播放—'+vara;};
time.innerText='已经暂停播放。';
bf_zt.src='images/play.png';
bf_zt.title='点击播放';
}
if(stanley_music_name.playState==1){ //停止状态
document.getElementById('hct').style.width='1%';
document.getElementById('jindutiao').style.width='1px';
bf_zt.src='images/play.png';
bf_zt.title='点击播放';
jingyin.innerText=time.innerText='';
if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};
next();
}
}
setInterval("bfq();",200); //播放器主控程序定时器
function chang_list(){ //播放列表控制核心
vara=a[xh];
document.getElementById("stanley_music_name").url=b[xh];
music_name.innerHTML='连接歌曲 '+a[xh];
jingyin.innerText=time.innerText='';
document.getElementById('bf_zt').src='images/play.png';
document.getElementById('bf_zt').title='点击播放';
if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};
}
function previous(){ //上一曲
if(dqxh==1){xh=xh;}else{xh=parseInt(xh)-parseInt(1);}; //播放列表下标减一
if(xh<1){alert('已经到第一首歌曲了!');stop();xh=1;} //如果下标小于1,则赋值为1,重新播放
chang_list();
}
function next(){ //下一曲
if(dqxh==1){xh=xh;}else{xh=parseInt(xh)+parseInt(1);}; //播放列表下标加一
if(xh>m){xh=1;} //如果下标超过歌曲总数,则赋值为1,重新播放
chang_list();
}
function play_pause(){ //播放暂停按钮,状态修改
if(stanley_music_name.playState==3){
stanley_music_name.controls.pause();
}
else if(stanley_music_name.playState==2){
stanley_music_name.controls.play();
}
else if(stanley_music==0){
if(xh>m){xh=1;} //如果下标超过歌曲总数,则赋值为1,重新播放
chang_list();
}
}
function mute(){ //是否静音
stanley_music_name.settings.mute=stanley_music_name.settings.mute==true?false:true;
jingyin.innerText=stanley_music_name.settings.mute==false?'':' 正在静音,再次单击即可取消静音。';
}
function music_tv(){ //视频区域的显示与隐藏
display('overlay');
display('music_tv');
}
function music_xh(){ //开启单曲循环
if(dqxh==0){
dq_xh.innerText='单曲';
dqxh=1;
alert('已切换为单曲循环模式');
}
else{
dq_xh.innerText='循环';
dqxh=0;
alert('已切换为列表循环模式');
}
}
function diag_user(){ //添加歌曲,页面刷新后消失
alert('临时添加歌曲,页面刷新后消失。');
m=parseInt(m)+parseInt(1);
var str_name=prompt("歌曲的名称:","歌曲的名称");
var str_url=prompt("歌曲的网址:","歌曲的网址");
if(str_url,str_name)
{
a.splice(m,0,'新添加:'+str_name);
b.splice(m,0,str_url);
list.innerHTML+= "<div id=\"list_"+m+"\" class=\"list_n\" onclick=\"changemusic('"+str_url+"','新添加:"+str_name+"','"+m+"');\"\>新添加:"+str_name+"</div\>";
}
}
</script>
正在加载播放器……</div>
<!--播放器模块 End-->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>音乐播放器</title>
<link href="music.css" rel="stylesheet" type="text/css" /></head><body onload="on_music();">
<!--播放器模块 Start-->
<div id="vitoland_music">
<script>
//名称:音乐播放器
//版本:1.0
//作者:李振兴
//邮箱:[email protected]
//网址:http://www.vitoland.cn/
//完成时间:2010年5月17日
//使用须知:您需要按格式添加音乐,否则程序会出错
// a[编号接上一个]="歌曲名称";
// b[编号与a相同]="歌曲地址";var web_name='惊起一滩鸥鹭'; //你的网站名称,下面可关闭
var bfq_name='音乐播放器'; //播放器名称,下面可关闭
var bfq_btl_gg=0; //是否在浏览器标题栏显示播放信息,0表示否,1表示是
var stanley_music=0; //加载播放器时是否播放,0表示否,1表示是
var huanying='<b><font color=black>欢迎您来到'+web_name+',在下诚挚邀请您在这里多坐会儿。</font></b>';
// 上面设定为不播放时,这是在播放器面板上显示的欢迎词,可自行更改,支持简单的HTML代码function diag_list(){
xh=1; //播放列表下标
a=new Array();
b=new Array(); a[1]="超人不会飞 周杰伦";
b[1]="http://news.scuec.edu.cn/xzw/admin/music/cc715f386db7165412359fa2aca21399.mp3";
a[2]="长椅 刘若英";
b[2]="http://um.mofei.com.cn/shengkan/UploadFile/%E6%BD%AE%E6%B5%81%E9%9F%B3%E4%B9%90/%E9%95%BF%E6%A4%85.wma";
a[3]="指望 郁可唯";
b[3]="http://clubpic.vodone.com/attachments/2010/05/149156535_201005022133108175.mp3";
a[4]="偏食 杨丞琳";
b[4]="http://www.zunyun.com/music/10415/偏食.wma";
a[5]="勇敢爱 张靓颖";
b[5]="http://pic.evlife.com.cn/AdvFiles/MKT/TcMktImg/yga.wma";
a[6]="台湾心跳声 蔡依林";
b[6]="http://www.zunyun.com/music/10415/台湾心跳声.wma";
a[7]="take me to your heart";
b[7]="http://www.fyyzg.com/yg/up/updj/20091950958393.wma";
a[8]="快乐崇拜 潘玮柏";
b[8]="http://au.9you.com/download/song/12.mp3";
a[9]="一人一梦 张含韵";
b[9]="http://mat1.qq.com/musictop2/dq/0706/yirenyimeng.mp3";
a[10]="去爱吧 胡歌";
b[10]="http://124.115.215.215/bbmedia.qq.com/media/music/audio/200805/qabhg.mp3";
//在这里继续添加歌曲,请注意格式及序号连续
m=parseInt(a.length)-parseInt(1); //计算数组上标
for(var i=1;i<=m;i++){
list.innerHTML+="<div id=\"list_"+i+"\" class=\"list_n\" onclick=\"changemusic('"+b[i]+"','"+a[i]+"','"+i+"');\"\>"+a[i]+"</div\>";
}
}//-------------以下无需修改,否则程序会出问题。当然,如果您会JS,请无视这些提示--------------//
function on_music(){ //播放器初始化
vitoland_music.innerHTML="<table id='music_kz' cellspacing='0' cellpadding='0'><tr><td width='25' align='center'><input id='bf_zt' type='image' title='点击播放' src='images/play.png' onclick='play_pause();' /></td><td id='music_info' align='left' title='单击此处静音,再次单击恢复。' onclick='mute();'><div id='jindutiao'></div><div id='info'><marquee behavior='scroll' scrollamount='2' direction='left'><span id='music_name'></span><span id='jingyin'></span> <span id='time'></span></marquee></div><div id='hct'></div></td><td width='21px' align='center'><input type='image' title='播放列表' src='images/list.png' onclick=display:""; /></td><td width='22px' align='center'><input type='image' title='播放器视频区域' src='images/tv.png' onclick='music_tv();' /></td></tr></table><div id='list' style='display:none;'><div id='list_n' class='list_n'></div><div id='list_n' class='list_n' style='color:#FFC;'><span onclick='diag_user();'>添加歌曲</span> <span onclick='previous();'>上一曲</span> <span onclick='next();'>下一曲</span> <span id='dq_xh' onclick='music_xh();'>循环</span></div></div><div id='overlay' style='display:none;'></div><div id='music_tv' class='floatDiv' style='display:none;'><div class='divTitle'><div><font color='#000000'>视频区域 (双击图像,全屏观看。)</font></div></div><div class='divContent'><object id='stanley_music_name' width='320px' height='240px' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><param name='URL' value='' /><param name='autoStart' value='1' /><param name='loop' value='1' /><param name='uiMode' value='none' /></object></div><div class='divFoot'><input type='button' class='divButton' onclick='music_tv()'; value='关 闭' /></div></div><br /><br />"
diag_list();
dqxh=0;
if(stanley_music==1){changemusic(b[1],a[1],'1');}
if(stanley_music==0){music_name.innerHTML=huanying;}
}function changemusic(url,musicname,xuhao){ //将歌曲信息传递给播放器和显示在相关的层中
vara=musicname;
xh=xuhao;
music_name.innerText='连接歌曲 '+vara;
jingyin.innerText=time.innerText='';
document.getElementById('bf_zt').src='images/play.png';
document.getElementById('bf_zt').title='点击播放';
if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};
document.getElementById("stanley_music_name").url=url;
}
function bfq(){ //播放器主控程序
var bf_zt=document.getElementById('bf_zt');
if(stanley_music_name.playState==9){ //连接状态
if(bfq_btl_gg==1){window.document.title=web_name+'—连接歌曲—'+vara;};
time.innerText='连接歌曲 '+vara+' ……';
}
if(stanley_music_name.playState==6){ //缓冲状态
if(bfq_btl_gg==1){window.document.title=web_name+'—缓冲歌曲—'+vara;};
time.innerText='缓冲歌曲 '+vara+' ……';
}
if(stanley_music_name.playState==3){ // 播放状态
document.getElementById('jindutiao').style.width=parseInt((stanley_music_name.controls.currentPosition/stanley_music_name.currentMedia.duration)*117+'px');
time.innerText=stanley_music_name.controls.currentPositionString+' | '+stanley_music_name.currentMedia.durationString;
document.getElementById('hct').style.width=stanley_music_name.network.downloadProgress+'%';
bf_zt.src='images/pause.png';
bf_zt.title='点击暂停';
if(bfq_btl_gg==1){window.document.title=web_name+'—★ '+vara+' ★';};
music_name.innerText=vara;
}
if(stanley_music_name.playState==2){ //暂停状态
if(bfq_btl_gg==1){window.document.title=web_name+'—暂停播放—'+vara;};
time.innerText='已经暂停播放。';
bf_zt.src='images/play.png';
bf_zt.title='点击播放';
}
if(stanley_music_name.playState==1){ //停止状态
document.getElementById('hct').style.width='1%';
document.getElementById('jindutiao').style.width='1px';
bf_zt.src='images/play.png';
bf_zt.title='点击播放';
jingyin.innerText=time.innerText='';
if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};
next();
}
}
setInterval("bfq();",200); //播放器主控程序定时器
function chang_list(){ //播放列表控制核心
vara=a[xh];
document.getElementById("stanley_music_name").url=b[xh];
music_name.innerHTML='连接歌曲 '+a[xh];
jingyin.innerText=time.innerText='';
document.getElementById('bf_zt').src='images/play.png';
document.getElementById('bf_zt').title='点击播放';
if(bfq_btl_gg==1){window.document.title=web_name+'—'+bfq_name;};
}
function previous(){ //上一曲
if(dqxh==1){xh=xh;}else{xh=parseInt(xh)-parseInt(1);}; //播放列表下标减一
if(xh<1){alert('已经到第一首歌曲了!');stop();xh=1;} //如果下标小于1,则赋值为1,重新播放
chang_list();
}
function next(){ //下一曲
if(dqxh==1){xh=xh;}else{xh=parseInt(xh)+parseInt(1);}; //播放列表下标加一
if(xh>m){xh=1;} //如果下标超过歌曲总数,则赋值为1,重新播放
chang_list();
}
function play_pause(){ //播放暂停按钮,状态修改
if(stanley_music_name.playState==3){
stanley_music_name.controls.pause();
}
else if(stanley_music_name.playState==2){
stanley_music_name.controls.play();
}
else if(stanley_music==0){
if(xh>m){xh=1;} //如果下标超过歌曲总数,则赋值为1,重新播放
chang_list();
}
}
function mute(){ //是否静音
stanley_music_name.settings.mute=stanley_music_name.settings.mute==true?false:true;
jingyin.innerText=stanley_music_name.settings.mute==false?'':' 正在静音,再次单击即可取消静音。';
}
function music_tv(){ //视频区域的显示与隐藏
display('overlay');
display('music_tv');
}
function music_xh(){ //开启单曲循环
if(dqxh==0){
dq_xh.innerText='单曲';
dqxh=1;
alert('已切换为单曲循环模式');
}
else{
dq_xh.innerText='循环';
dqxh=0;
alert('已切换为列表循环模式');
}
}
function diag_user(){ //添加歌曲,页面刷新后消失
alert('临时添加歌曲,页面刷新后消失。');
m=parseInt(m)+parseInt(1);
var str_name=prompt("歌曲的名称:","歌曲的名称");
var str_url=prompt("歌曲的网址:","歌曲的网址");
if(str_url,str_name)
{
a.splice(m,0,'新添加:'+str_name);
b.splice(m,0,str_url);
list.innerHTML+= "<div id=\"list_"+m+"\" class=\"list_n\" onclick=\"changemusic('"+str_url+"','新添加:"+str_name+"','"+m+"');\"\>新添加:"+str_name+"</div\>";
}
}
</script>
正在加载播放器……</div>
<!--播放器模块 End-->
</body>
</html>
解决方案 »
- jsp页面中js代码 提示 $not defined
- javascript自由变化文字的大小,附源码
- 如何用代码来模拟select 的onchange
- jquery 如何获取整个.select的html代码?
- js刷新父页面(父页面是个框架)
- 谁有下拉菜单的代码..谢谢!!
- datagrid表头固定,内容用滚动条移动
- 我的ie6居然创建不了xmlhttp对象,怎么办啊?
- 请教一个web打印定位的问题,800里加急,多谢!
- 请问,我想使IE上"Back键"的功能失效,应该怎么设置啊?
- 请教复制页面地址到剪切板的js代码
- 【JavaScript获取来自百度的 document.referrer 里面的关键字编码问题】(土豆网的)
@charset "utf-8";
/*名称:音乐播放器*/
/*版本:1.0*/
/*本文件是:音乐播放器样式表*/
/*作者:李振兴*/
/*邮箱:[email protected]*/
/*网址:http://www.vitoland.cn http://www.codefans.net/*/
/*完成时间:2010年5月17日*//** {filter:gray;}*/
body,td,th {
font-family:Arial,"微软雅黑","宋体";
font-size:12px;
}
#music_info {
position:relative;
width:117px;
top: 3px;
}
#jindutiao,#info {
position:absolute;
left:0;
right:0;
}
#info{
width:97%;
z-index:3;
}
#jindutiao{
width:1px;
height:17px;
z-index:2;
background-image:url(images/jdt.png);
}
#hct {
position:absolute;
background-image:url(images/hct.png);
width:1%;
height:17px;
z-index:1;
background-color:#6C6;
}
.hr {
border-top:1px dashed #339933;
}
#music_kz{
position: absolute;
z-index:10;
width:185px;
height:23px;
background-image:url(images/bg.png);
}
#list{
position: absolute;
z-index:9;
width:175px;
background-image:url(images/x.png);
padding-right: 5px;
padding-left: 5px;
}
.list_n{
width:170px;
height:18px;
cursor:pointer;
border-bottom:1px dashed #339933;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
}
/*----------------黑色半透明背景、弹出层------------------*/
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 8;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=40);
-moz-opacity: 0.6;
opacity: 0.6;
}
.floatDiv{
padding:0 0 0 0;
position:absolute;
width:325px;
height:300px;;
margin:0 0 0 0;
z-index:10;
border:1px solid #DADADA;
background:#FFF;
padding:1px;
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/
margin-left:-162.5px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-150px!important;/*FF IE7 该值为本身高的一半*/
}
.floatDiv .divTitle{
background:#E0E0E0;
background-position:top left;
background-repeat:repeat-x;
height:25px;
line-height:25px;
padding:0px 4px;
cursor:default;
}
.floatDiv .divContent{
padding:3px;
height:auto; cursor:default;
}
.floatDiv .divFoot{
background:#F0F0F0;
text-align:right;
padding:4px;
background:#E0E0E0;
background-position:top left;
background-repeat:repeat-x;
}
.floatDiv input.divButton{
background:#E0E0E0;
background-position:top left;
background-repeat:repeat-x;
border:1px solid #D1D3D2;
height:21px;
font-size:12px;
padding:2px 5px;
color:#626264;
}
<input type='image' title='播放列表' src='images/list.png' onclick=display:""; />