歌曲名 艺人名 时长
HTML+CSS+JavaScript做的音乐播放器，就当是入门的小东西吧～
疯了，因为 有.mp3文件搞得项目太大，没法打包上传，懒的去删了，直接上代码～
music.html
这是音乐盒
style.css
/* CSS Document */
.main
{
margin-left:200px;
margin-top:100px;
border-width: 2px;
border-style: solid;
border-color:#FF0066;
width:1280px;
height:700px;
padding:2px 5px;
position:absolute;
z-index:9;
background-color:#663366;
box-shadow: 30px 30px 5px #888888;
}
.musicHead
{
width:1280px;
padding:13px 9px;
height:60px;
}
.musicLeft
{
float:left;
padding:3px 5px;
width:170px;
margin-top:12px;
}
.musicCenter
{ float:left;
width:724px;
padding:3px 5px;
height:20px;
}
.musicBottom
{
margin-top:6px;
}
.title
{
padding:5px;
margin-left:20px;
}
.songArray
{
position:absolute;
color:#FF0066;
padding:5px;
left: 230px;
top: 250px;
z-index:10;
text-shadow: 5px 5px 5px #FF0000;
}
.songArrayLeft
{
width:300px;
float:left;
text-shadow: 5px 5px 5px #FF0000;
}
.songArrayCenter
{
width:300px;
float:left;
text-shadow: 5px 5px 5px #FF0000;
}
.songArrayRight
{
width:300px;
float:left;
text-shadow: 5px 5px 5px #FF0000;
}
.musicPlayModel
{
margin-top:22px;
float:left;
width:330px;
height:40px;
}
#timeshow
{
margin-left:8px;
float:left;
width:100px;
color:#FFFFFF;
}
.modelshow
{
margin-left:8px;
float:left;
width:30px;
height:40px;
}
.sound
{
position:absolute;
width:200px;
height:20px;
z-index:10;
left: 1082px;
top: 35px;
margin-left:5px;
}
.soundImageOpen
{
width:25px;
height:25px;
float:left;
background:url(../photo/音量开.png) no-repeat;
}
.soundImageClose
{
width:25px;
height:25px;
float:left;
background:url(../photo/音量关.png) no-repeat;
}
.VoidProcess
{
width: 66px;
height: 8px;
cursor: pointer;
background-color: #000000;
float:left;
margin-top:6px;
margin-left:5px;
border:2px solid;
border-radius:25px;
}
.VoidProcessYet
{
width: 0px;
height: 8px;
position:absolute;
cursor: pointer;
background-color: #FF0000;
float:left;
margin-top:6px;
margin-left:10px;
left: 19px;
top: 0px;
border:2px solid;
border-radius:25px;
}
.ProcessControl
{
width:720px;
padding: 5px 10px 10px 10px;
float:left;
height:20px;
color:#ffffff;
}
.Process
{
width: 720px;
float: left;
height: 8px;
cursor: pointer;
background-color:#000000;
border:2px solid;
border-radius:25px;
}
.ProcessYet
{
width: 0px;
position:absolute;
height: 8px;
cursor: pointer;
background-color: #FF0000;
z-index:4;
border:2px solid;
border-radius:25px;
}
.prev
{
height:30px;
width:40px;
float:left;
}
#singer
{
color:#FFFFFF;
}
.MainControl
{
width:30px;
height:30px;
margin-left:20px;
margin-right:5px;
float:left;
background:url(../photo/暂停.jpg) no-repeat;
background-size:30px;
}
.stop
{
width:30px;
height:30px;
margin-left:20px;
margin-right:5px;
float:left;
background:url(../photo/开始.jpg) no-repeat;
background-size:30px;
}
.next
{
height:30px;
width:40px;
float:left;
}
.redLine
{
height:3px;
background:#FF0066;
}
.songList
{
width:1024px;
}
开始与结束的切换
#begin
{
width:5px;
height:5px;
background: #FF0000;
}
.end
{
width:5px;
height:5px;
background: #0000FF;
}
a{text-decoration:none;
color:#FF0066;}
a:hover{text-decoration:none;
color:#6600FF;
}
alert(1);
var player=document.getElementById("video1");
var mysongs=new Array("./music/简短铃声.mp3","./music/矜持.mp3","./music/很受伤.mp3","./music/爱你的最后一天.mp3","./music/三个人的时光.mp3","./music/有关爱情.mp3","./music/foryou.mp3","./music/123.mp3");
var singerName=new Array("1 简短铃声 "," 2 矜持"," 3 很受伤 "," 4 爱你的最后一天","5 三个人的时光","6 有关爱情","7 for you","8 123");
var nowSong=new Array("1 歌名《简短铃声》--测试","2 歌名《矜持》--王菲","3 歌名《很受伤》--任贤齐","4 歌名《爱你的最后一天》--任贤齐","5 歌名《三个人的时光》--三藏","6 歌名《有关爱情》--DJ","7 歌名《for you》--Byane","8 歌名《123》--神人")
var singer=new Array("测试","王菲","任贤齐","任贤齐","三藏","DJ","Byane","神人");
var time=new Array("00:04","04:38","04:31","03:52","01:30","04:04","06:33","00:09");
var songIndex=0;
document.write("
");
player.addEventListener('ended',onPlayEnd);
player.οnlοadstart=Play(); //音乐load的时候就开始调用的函数
//player.οnlοadstart=totaltime();
//未封装，歌曲列表
document.write('');
//暂时认为时间是静态存入数组的，估计也是，因为动态要等音频加载完了才能一个一个现实！
for(var i=0;i'+""+singerName[i]+""+' ');
document.write(''+singer[i]+'');
document.write(''+time[i]+'');
document.write("");
}
document.write('