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

最新推荐文章于 2024-08-28 07:33:35 发布

「已注销」

最新推荐文章于 2024-08-28 07:33:35 发布

阅读量6k

点赞数

本文链接：https://blog.csdn.net/u014660247/article/details/51158478

版权

这篇博客介绍了如何使用原生HTML创建一个简单的音乐播放器。通过设置不同的样式和JavaScript函数，实现了音乐的播放、暂停、切换等功能，并提供了歌手切换和音乐列表展示。

摘要由CSDN通过智能技术生成

我采用的是原生的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