html中如何实现自己的音乐播放器

来源：互联网发布：python caffe 命令行编辑：程序博客网时间：2024/05/18 00:00

我

我采用的是原生的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=gb2312" />
<title>HTML音乐播放器</title>
<style type="text/css">
#Top{
background-color:#333333;
font-family:"楷体";
font-size:12px;
color:#FFFFFF;
width:auto;
height:30px;
margin:0px;
line-height:30px;

}
#Top .Log{
font-family:"华文行楷";
width:80px;
height:30px;
float:right;
text-align:center;
}
#Top .Register{
font-family:"华文行楷";
width:80px;
height:30px;
float:right;
text-align:center;


}
#Top .rt
{
margin-left:100px;
width:200px;
height:30px;
float:left;
text-align:center;
}
body{
background-image:url(image/bg3.png);
margin:0px;
}
.MusicMain{
background-image:url(image/bg1.png);
border:5px solid #000;
width:1129px;
height:490px;
margin:80px auto;
border-radius:10px;

}
.MusicMain .Name
{
width:247px;
height:490px;
margin:0px;
padding:0px;
float:left;
}
.MusicMain .Name .Start{
font-family:"华文行楷";
text-align:center;
background:#FF33CC;
color:#FFFFFF;
width:240px;
height:70px;
line-height:70px;
border-right:7px solid #00FF00;
margin:0px;
}
.MusicMain .Name .Start:hover
{
cursor:pointer;
}
.MusicMain .Image
{
width:660px;
height:422px;
background-image:url(image/by2.png);
float:left;
margin:0px;
}
.MusicMain .Image .zhuan
{
width:200px;
height:200px;
margin:100px auto;
display:none;
}
.MusicMain .Music
{
width:222px;
height:80px;
background-color:#FF0099;
color:#FFFFFF;
font-size:20px;
font-family:"华文行楷";
float:right;
line-height:70px;
text-align:center;
}
.MusicMain .Music:hover{ cursor:none;}
.MusicMain .item
{
width:222px;
height:342px;
float:right;
padding:0px;
margin:0px;
}
.MusicMain .item .buff
{
width:100px;
height:100px;
margin:90px auto;
display:none;
}
.MusicMain .item ul{list-style:none; margin:0px; padding:0px;}
.MusicMain .item ul li
{
width:222px;
height:114px;
font-family:"华文行楷";
background-color:#FF00FF;
color:#FFFFFF;
line-height:114px;
text-align:center;
margin:0px;

}
.MusicMain .item ul li:hover{ cursor:pointer; background-color:#FF99FF;}
.MusicMain .con{
width:882px;
height:67px;
float:right;
background-color:#000;

}
.MusicMain .con .bf
{
width:50px;
height:50px;
background-image:url(image/ZT2.png);

border:2px solid #FF0000;
margin-top:7px;
float:left;
}
.MusicMain .con .probar
{
width:820px;
height:50px;
border:2px outset #00FF00;

float:left;
margin-top:7px;
}
.MusicMain .con .pro
{
height:50px;
width:0px;
background-color:#CC0066;
}

</style>
</head>
<body>
<div id="Top">
<div class="rt">HTML音乐播放器</div>
<div class="Register">注册</div>
<div class="Log">登录</div>
</div>
<div class="MusicMain">
<div class="Name">
<div class="Start" id="StartTwins" name="StartName" onMouseDown="HandleTwinsBg()">Twins</div>
<div class="Start" id="StartBy2" name="StartName"onMouseDown="HandleBy2Bg()">By2</div>
<div class="Start" id="StartZxz" name="StartName" onMouseDown="HandleZxzBg()">张信哲</div>
<div class="Start" id="StartCzy" name="StartName" onMouseDown="HandleCzyBg()">蔡卓妍</div>
<div class="Start" id="StartFwq" name="StartName" onMouseDown="HandleFwqBg()">范玮琪</div>
<div class="Start" id="StartRnm" name="StartName" onMouseDown="HandleRnmBg()">林俊杰</div>
<div class="Start" id="StartGxy" name="StartName" onMouseDown="HandleGxyBg()" >关心妍</div>
</div>
<div class="Image" id="StartImageBg">
<div class="zhuan" id="xuanzhuan">
<img src="image/ajax-loader.gif" width="200" height="200"/>
</div>
</div>
<div class="Music">音乐专辑</div>
<div class="item">
<div class="buff" id="musicBuff"><img src="image/ajax-loader.gif" width="100" height="100"/></div>
<ul id="buffed">
<li id="one" onMouseDown="HandleOne()"></li>
<li id="two" onMouseDown="HandleTwo()"></li>
<li id="three" onMouseDown="HandleThree()"></li>
</ul>
</div>
<div class="con">
<div class="bf" id="Sbf" onMouseEnter="HandleMoveBfbg()" onMouseLeave="HandleOutBfbg()" onMouseDown="HandleDownBfbg()"></div>
<div class="probar">
<div class="pro" id="Pro"></div>
</div>
</div>
</div>

<script type="text/javascript">
var bfElem = document.getElementById("Sbf");
var flag = false;
var Media = document.createElement("Audio");
var CurrentStart;
var ImageBgSrc = new Array(7);
var TwinsMusic = new Array(3);
var By2Music = new Array(3);
var ZxzMusic = new Array(3);
var CzyMusic = new Array(3);
var FwqMusic = new Array(3);
var RnmMusic = new Array(3);
var GxyMusic = new Array(3);
var CurrentMusic = new Array(3);
var MyTimer;

ImageBgSrc[0] = "url(./image/twins.png)";
ImageBgSrc[1] = "url(./image/by2.png)";
ImageBgSrc[2] = "url(./image/张信哲.png)";
ImageBgSrc[3] = "url(./image/蔡卓妍.png)";
ImageBgSrc[4] = "url(./image/范玮琪.png)";
ImageBgSrc[5] = "url(./image/Richard.png)";
ImageBgSrc[6] = "url(./image/关心妍.png)";

TwinsMusic[0] = "./music/死性不改.mp3";
TwinsMusic[1] = "./music/我很想爱他.mp3";
TwinsMusic[2] = "./music/莫斯科没有眼泪.mp3";

By2Music[0] = "./music/不够成熟.mp3";
By2Music[1] = "./music/你并不懂我.mp3";
By2Music[2] = "./music/勇敢.mp3";

ZxzMusic[0] = "./music/爱如潮水.mp3";
ZxzMusic[1] = "./music/过火.mp3";
ZxzMusic[2] = "./music/从开始到现在";

CzyMusic[0] = "./music/明明.mp3";
CzyMusic[1] = "./music/往事并不如烟.mp3";
CzyMusic[2] = "./music/错过.mp3";

FwqMusic[0] = "./music/那些花儿.mp3";
FwqMusic[1] = "./music/最初的梦想.mp3";
FwqMusic[2] = "./music/最亲爱的你.mp3";

RnmMusic[0] = "./music/杀手.mp3";
RnmMusic[1] = "./music/豆浆油条.mp3";
RnmMusic[2] = "./music/江南.mp3";

GxyMusic[0] = "./music/终点.mp3";
GxyMusic[1] = "./music/放生.mp3";
GxyMusic[2] = "./music/以身试爱.mp3";

var TwinsElem = document.getElementById("StartTwins");
var By2Elem = document.getElementById("StartBy2");
var ZxzElem = document.getElementById("StartZxz");
var CzyElem = document.getElementById("StartCzy");
var FwqElem = document.getElementById("StartFwq");
var RnmElem = document.getElementById("StartRnm");
var GxyElem = document.getElementById("StartGxy");
var oneElem = document.getElementById("one");
var twoElem = document.getElementById("two");
var threeElem = document.getElementById("three");
var buffElem = document.getElementById("musicBuff");
var buffedElem = document.getElementById("buffed");
var proElem = document.getElementById("Pro");

function HandlePro()
{
var curr = Media.currentTime;
var end = Media.duration;

var width = curr/end * 820;
var Width = Math.floor(width);

var Wid = Width+"px";

proElem.style.width = Wid;
if(curr == end)
{
clearInterval(MyTimer);
}
}
function HandleOne()
{

if(CurrentStart == "undefine")
alert("请先选择歌手");
else
{
Media.src = CurrentMusic[0];
Media.play();
flag = true;
bfElem.style.backgroundImage = "url(./image/BF1.png)";
MyTimer = setInterval("HandlePro()",1000);

}
}
function HandleTwo()
{
if(CurrentStart == "undefine")
alert("请先选择歌手");
else
{
Media.src = CurrentMusic[1];
Media.play();
flag = true;
bfElem.style.backgroundImage = "url(./image/BF1.png)";
MyTimer = setInterval("HandlePro()",1000);
}
}
function HandleThree()
{
if(CurrentStart == "undefine")
alert("请先选择歌手");
else
{
Media.src = CurrentMusic[2];
Media.play();
flag = true;
bfElem.style.backgroundImage = "url(./image/BF1.png)";
MyTimer = setInterval("HandlePro()",1000);
}
}

// Duration 返回当前播放音频的总时长
function HandleDownBfbg()
{
if(!flag)
{
flag = true;
}
else
{
flag = false;
Media.pause();
}
}
function HandleMoveBfbg()
{
if(flag)
bfElem.style.backgroundImage = "url(./image/BF2.png)";
else
bfElem.style.backgroundImage ="url(./image/ZT1.png)";
}
function HandleOutBfbg()
{
if(flag)
bfElem.style.backgroundImage = "url(./image/BF1.png)";
else
bfElem.style.backgroundImage = "url(./image/ZT2.png)";
}

var ImageBgElem = document.getElementById("StartImageBg");
var xuanzhuanElem = document.getElementById("xuanzhuan");

function StartNameBg(elem)
{
var StartNames = document.getElementsByName("StartName");
for(var i = 0; i < StartNames.length; i++)
{
if(StartNames[i] == elem)
StartNames[i].style.backgroundColor = "#33ff00";
else
StartNames[i].style.backgroundColor = "#ff00cc";
}
}
function HandleTwinsBg()
{
CurrentMusic = TwinsMusic;
CurrentStart = TwinsElem;
musicItem(CurrentStart);
StartNameBg(TwinsElem);
ImageBgElem.style.backgroundImage = "none";
xuanzhuanElem.style.display = "block";
buffElem.style.display = "block";
buffedElem.style.display = "none";
setTimeout(function(){ xuanzhuanElem.style.display = "none";
ImageBgElem.style.backgroundImage = ImageBgSrc[0];buffElem.style.display = "none";
buffedElem.style.display = "block";clearTimeout();},200);
}


function HandleBy2Bg()
{
CurrentMusic = By2Music;
CurrentStart = By2Elem;
musicItem(CurrentStart);
StartNameBg(By2Elem);
ImageBgElem.style.backgroundImage = "none";
xuanzhuanElem.style.display = "block";
buffElem.style.display = "block";
buffedElem.style.display = "none";
setTimeout(function(){ xuanzhuanElem.style.display = "none";
ImageBgElem.style.backgroundImage = ImageBgSrc[1];buffElem.style.display = "none";
buffedElem.style.display = "block";clearTimeout();},200);
}
function HandleZxzBg()
{
CurrentMusic = ZxzMusic;
CurrentStart = ZxzElem;
musicItem(CurrentStart);
StartNameBg(ZxzElem);
ImageBgElem.style.backgroundImage = "none";
xuanzhuanElem.style.display = "block";
buffElem.style.display = "block";
buffedElem.style.display = "none";
setTimeout(function(){ xuanzhuanElem.style.display = "none";
ImageBgElem.style.backgroundImage = ImageBgSrc[2];buffElem.style.display = "none";
buffedElem.style.display = "block";clearTimeout();},200);
}
function HandleCzyBg()
{
CurrentMusic = CzyMusic;
CurrentStart = CzyElem;
musicItem(CurrentStart);
StartNameBg(CzyElem);
ImageBgElem.style.backgroundImage = "none";
xuanzhuanElem.style.display = "block";
buffElem.style.display = "block";
buffedElem.style.display = "none";
setTimeout(function(){ xuanzhuanElem.style.display = "none";
ImageBgElem.style.backgroundImage = ImageBgSrc[3];buffElem.style.display = "none";
buffedElem.style.display = "block";clearTimeout();},200);
}
function HandleFwqBg()
{
CurrentMusic = FwqMusic;
CurrentStart = FwqElem;
musicItem(CurrentStart);
StartNameBg(FwqElem);
ImageBgElem.style.backgroundImage = "none";
xuanzhuanElem.style.display = "block";
buffElem.style.display = "block";
buffedElem.style.display = "none";
setTimeout(function(){ xuanzhuanElem.style.display = "none";
ImageBgElem.style.backgroundImage = ImageBgSrc[4];buffElem.style.display = "none";
buffedElem.style.display = "block";clearTimeout();},200);
}
function HandleRnmBg()
{
CurrentMusic = RnmMusic;
CurrentStart = RnmElem;
musicItem(CurrentStart);
StartNameBg(RnmElem);
ImageBgElem.style.backgroundImage = "none";
xuanzhuanElem.style.display = "block";
buffElem.style.display = "block";
buffedElem.style.display = "none";
setTimeout(function(){ xuanzhuanElem.style.display = "none";
ImageBgElem.style.backgroundImage = ImageBgSrc[5];buffElem.style.display = "none";
buffedElem.style.display = "block";clearTimeout();},200);
}
function HandleGxyBg()
{
CurrentMusic = GxyMusic;
CurrentStart = GxyElem;
musicItem(CurrentStart);
StartNameBg(GxyElem);
ImageBgElem.style.backgroundImage = "none";
xuanzhuanElem.style.display = "block";
buffElem.style.display = "block";
buffedElem.style.display = "none";
setTimeout(function(){ xuanzhuanElem.style.display = "none";
ImageBgElem.style.backgroundImage = ImageBgSrc[6];buffElem.style.display = "none";
buffedElem.style.display = "block";clearTimeout();},200);
}
function musicItem(elem)
{
if(elem == TwinsElem)
{
oneElem.innerHTML = "死性不改";
twoElem.innerHTML = "我很想爱他";
threeElem.innerHTML = "莫斯科没有眼泪";
}
else if(elem == By2Elem)
{
oneElem.innerHTML = "不够成熟";
twoElem.innerHTML = "你并不懂我";
threeElem.innerHTML = "勇敢";
}
else if(elem == ZxzElem)
{
oneElem.innerHTML = "爱如潮水";
twoElem.innerHTML = "过火";
threeElem.innerHTML = "从开始到现在";
}
else if(elem == CzyElem)
{
oneElem.innerHTML = "明明";
twoElem.innerHTML = "往事并不如烟";
threeElem.innerHTML = "错过";
}
else if(elem == RnmElem)
{
oneElem.innerHTML = "杀手";
twoElem.innerHTML = "豆浆油条";
threeElem.innerHTML = "江南";
}
else if(elem == FwqElem)
{
oneElem.innerHTML = "那些花儿";
twoElem.innerHTML = "最初的梦想";
threeElem.innerHTML = "最亲爱的你";
}
else
{
oneElem.innerHTML = "终点";
twoElem.innerHTML = "放生";
threeElem.innerHTML = "以身试爱";
}
}

</script>
</body>
</html>

0 0