利用html、css3、js、jquery混合写的简易网页播放器
//html部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易音乐播放器</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<!--头部开始-->
<div class="title" id="title">
<i>Jquery/HTML制作网页音乐播放器</i>
<audio src="#" id="audiomusic" autoplay="autoplay" hidden="hidden" />
</div>
<!--头部结束-->
<div class="music" id="music">
<div class="musicBox"></div><!--透明度更改了的播放框-->
<div class="musicBoxs">
<div class="Topmusic">
<!--歌手头像开始-->
<div class="photo">
<img id="imagess" src="#" alt="网络开小差..." class="images" />
</div>
<!--歌手头像结束-->
<div class="content">
<!--歌曲描述开始-->
<div class="musicname" id="musicname">
</div>
<!--歌曲描述结束-->
<div class="play">
<div class="playN">
<!--上一首、暂停、下一首开始-->
<div class="playNM">
<div class="left" onClick="down()"></div>
<div class="centers" id="center" onClick="play()"></div>
<div class="right" onClick="up()"></div>
</div>
<!--结束-->
<!--声音部分开始-->
<div class="playNN">
<div class="shengyin" id="muted" onClick="muted()"></div>
<div class="lang" id="lang">
<div class="jingdu" id="jingdu"></div>
<i class="dian" id="dian"></i>
</div>
</div>
<!--声音部分结束-->
</div>
<!--歌曲播放进度开始-->
<div class="Timejindu" id="Timejindu">
<div class="jindutiao" id="jindutiao"></div>
<i class="dian1" id="dian1"></i>
</div>
<!--歌曲播放进度结束-->
<!--歌曲播放时间开始-->
<div class="time" id="time">00:00</div>
<!--歌曲播放时间结束-->
<!--摆设图标,不用管-->
<div class="loop" id="loop"></div>
<div class="random" id="random"></div>
<!--摆设图标,不用管,结束-->
</div>
</div>
</div>
<!--歌曲名字部分-->
<div class="Buttommusic">
<ul class="name" id="name">
</ul>
</div>
<!--歌曲名字部分结束-->
</div>
</div>
<!--文字打印部分-->
<div class="textContentBox">
<div class="textContent" id="textContent">
<i class="text" id="text">
你们这些混蛋;新的一年就要到了;我在湖南祝你们新年快乐;身体健康,万事如意;
考试了的;老师改卷科科90;还没有考的;考的全会,蒙的全对;新年快乐
</i>
</div>
</div>
<!--文字打印部分结束-->
<!--版权部分-->
<div class="floor">本播放器由麦宜楷制作 ©麦宜楷 联系方式:15574711460 </div>
<!--版权部分结束-->
</body>
</html>
//css部分
/* CSS Document */
*{
margin:0 auto;
padding:0;
}
body{
margin:0 auto;
padding:0;
position:relative;
background:#3B3B3B;
}
li{
list-style:none;
}
.title{
width:100%;
height:200px;
position:relative;
text-align:center;
font-size:25px;
background:url(images/newyear.jpg) no-repeat;
background-size:100% 100%;
color:#fff;
}
.title i{
display:inline-block;
margin-top:50px;
}
.music{
width:100%;
height:550px;
position:relative;
background:url(images/10.jpg) no-repeat;
background-size:cover;
}
.floor{
width:100%;
height:20px;
position:relative;
text-align:center;
line-height:30px;
color:#fff;
}
.musicBox{
width:600px;
height:300px;
background:#181818;
position:absolute;
top:70px;
left:600px;
z-index:5;
opacity:0.5;
border-radius:15px;
}
.musicBoxs{
width:600px;
height:300px;
position:absolute;
top:70px;
left:600px;
z-index:6;
}
.Topmusic{
width:100%;
height:170px;
position:absolute;
z-index:0;
}
.photo{
width:150px;
height:150px;
position:absolute;
border-radius:10px;
box-shadow:0 2px 10px black;
overflow:hidden;
top:10px;
left:10px;
}
.images{
width:150px;
height:150px;
border-radius:10px;
}
.content{
width:400px;
height:150px;
background:#141414;
position:absolute;
top:10px;
right:10px;
border-radius:10px;
text-indent:20px;
}
.musicname strong,.musicname .guojia,.musicname .allname{
display: block;
text-overflow: ellipsis;
line-height:25px;
}
.play{
width:100%;
height:75px;
position:absolute;
}
.Buttommusic{
width:80%;
height:100px;
position:absolute;
background:#141414;
bottom:10px;
left:10%;
font-size:14px;
border-radius:10px;
}
.name{
width:90%;
height:80px;
margin-top:10px;
padding:0 5%;
}
.name li{
padding-left:30px;
color:#aaa;
cursor:pointer;
margin-bottom:10px;
transition:all 0.3s ease 0s;
}
.playN{
width:100%;
height:25px;
position:absolute;
top:5px;
}
.playNM{
width:120px;
height:100%;;
position:absolute;
left:20px;
}
.playNM .left,.playNM .center,.playNM .right{
width:25px;
height:25px;
margin-right:15px;
opacity:0.6;
float:left;
border-radius:15px;
cursor:pointer;
}
.playNM .centers{
width:25px;
height:25px;
margin-right:15px;
opacity:0.6;
float:left;
border-radius:15px;
cursor:pointer;
}
.left{
background:url(images/ec44ba9672.jpg) no-repeat -536px -77px;
}
.center{
background:url(images/ec44ba9672.jpg) no-repeat -248px -19px;
}
.centers{
background:url(images/ec44ba9672.jpg) no-repeat -152px -77px;
}
.right{
background:url(images/ec44ba9672.jpg) no-repeat -56px -135px;
}
.playNM .left:hover{
opacity:1;
}
.playNM .center:hover{
opacity:1;
}
.playNM .centers:hover{
opacity:1;
}
.playNM .right:hover{
opacity:1;
}
.playNN{
width:150px;
height:25px;
position:absolute;
right:20px;
}
.shengyin{
background:url(images/ec44ba9672.jpg) no-repeat -56px -310px;
width:24px;
height:24px;
position:absolute;
left:10px;
top:1px;
opacity:0.6;
border-radius:15px;
cursor:pointer;
}
.shengyins{
background:url(images/ec44ba9672.jpg) no-repeat -536px -253px;
width:24px;
height:24px;
position:absolute;
left:10px;
top:1px;
opacity:0.6;
border-radius:15px;
cursor:pointer;
}
.shengyin:hover{
opacity:1;
}
.lang{
width:100px;
height:5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
cursor: pointer;
position: absolute;
top:10px;
right:5px;
border-radius:5px;
cursor: pointer;
}
.jingdu{
width:0px;
height: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
cursor: pointer;
background:#00B75B;
border-radius:5px;
float:left;
cursor: pointer;
}
.dian{
width:5px;
height:5px;
display:block;
border-radius:5px;
border:1px solid #036;
position:relative;
margin-left:-5px;
margin-top:-1px;
float:left;
cursor: pointer;
}
.Timejindu{
width:98%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
cursor: pointer;
height: 5px;
position: absolute;
background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
bottom:30px;
border-radius:5px;
left:1%;
}
.jindutiao{
width:7px;
height: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
cursor: pointer;
background:#00B75B;
border-radius:5px;
float:left;
}
.dian1{
width:5px;
height:5px;
display:block;
border-radius:5px;
border:1px solid #036;
position:relative;
margin-left:0px;
margin-top:-1px;
float:left;
}
.time{
width:30px;
height:20px;
position:absolute;
bottom:5px;
left:5px;
}
.loop{
width:25px;
height:25px;
position:absolute;
background:url(images/ec44ba9672.jpg) no-repeat -55px -253px;
bottom:3px;
right:80px;
border-radius:15px;
opcity:0.6;
}
.random{
width:25px;
height:25px;
position:absolute;
background:url(images/ec44ba9672.jpg) no-repeat -56px -367px;
bottom:3px;
right:30px;
border-radius:15px;
opacity:0.6;
}
.loop:hover{
opacity:1;
}
.random:hover{
opacity:1;
}
.name li.playmusic{
vertical-align:middle;
color:#fff;
font-weight:bold;
}
.textContentBox{
width:560px;
height:500px;
position:absolute;
top:200px;
left:30px;
}
.textContent{
width:540px;
position:absolute;
left:10px;
top:15px;
height:470px;
}
.text{
font-size:14px;
line-height:30px;
color:red;
}
//js、jquery部分
// JavaScript Document
var str="";
var music;
var index=0;
var volume=0;
var allTime=0;
var marginLeft=0;
var content="";//记录标签里原有的文本
var upindex=0;//记录数组的
var contentindex=0;//记录当前的输出位
var uptext="";//记录上一次输出的
var backgroundphoto="";
var backgroundphotoindex=0;
var color="";//颜色变换
var colorindex=0;
var colors="";
var colorindexs=0;
$(function(){
//考虑到自己能力有限,歌曲的信息与路劲由自己添加
//背景部分也可以优化
//颜色代码需要自己去找
music=[["新年快乐.mp3","中国娃娃","祝愿大家新年快乐","20.jpg"],["新年快乐s.mp3","小虎队、忧欢派对","新年快乐","21.jpg"],["快乐老家.mp3","陈明 ","欢乐老家","22.jpg"]];
backgroundphoto=["6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg"];
color=["#FF66FF","#CC33CC","#CC00FF","#FF33FF","#CC99FF","#9900CC","#FF00FF","#CC66FF","#990099","#CC0099","#CC33FF","#CC99CC","#990066","#993399","#CC66CC","#CC00CC","#663366"];
colors=["Aqua","Fuchsia","Gray","Gree","Lime","Maroon","Navy","Olive","Purple","Red","Silver","Teal","White","Yellow","Blue"];
//标题字体颜色
function colorchange(){
$("#title").css("color",color[colorindex]);
colorindex++;
if(colorindex==color.length){
colorindex=0;
}
}
setInterval(colorchange,"500");
//打印文字
function colorchanges(){
$("#text").css("color",colors[colorindexs]);
colorindexs++;
if(colorindexs==colors.length){
colorindexs=0;
}
}
setInterval(colorchanges,"500");
//背景循环
function backgrounds(){
$("#music").css("background-image","url(images/"+backgroundphoto[backgroundphotoindex]+")");
backgroundphotoindex++;
if(backgroundphotoindex==backgroundphoto.length){
backgroundphotoindex=0;
}
}
setInterval(backgrounds,'5000');
//音量
$("#audiomusic").attr("src","music/"+music[index][0]);
document.getElementById("audiomusic").volume=0.5;
volume=document.getElementById("audiomusic").volume;
$("#jingdu").css("width",(volume*100)+"%");
//下边的名字
$.each(music,function(i){
str+="<li>"+music[i][1]+"-"+music[i][0]+"</li>";
});
$("#name").html(str);
//上边的名字
str="";
$.each(music,function(i){
if($("#audiomusic").attr("src").substr($("#audiomusic").attr("src").indexOf("/")+1)==music[i][0]){
index=i;
title(index);
}
});
//设定时间
function getTime(){
allTime=Math.round(document.getElementById("audiomusic").duration);
var time=parseInt(document.getElementById("audiomusic").currentTime)+1;
if(time<10){
$("#time").html("00:0"+time);
}else if(time>9){
if(time%60<10){
$("#time").html("0"+parseInt(time/60)+":0"+time%60);
}else{
$("#time").html("0"+parseInt(time/60)+":"+time%60);
}
}
if(time%allTime!=0){
$("#jindutiao").css("width",Math.round((time/allTime)*100)+"%");
}
if(time==allTime){
if(index<music.length-1){
index=index+1;
}else if(index==music.length){
index==0;
}
title(index);
}
if($("#jindutiao").width()>$("#Timejindu").width()-8){
if(parseInt($("#dian1").css("margin-left"))>-7){
margnLeft=parseInt($("#dian1").css("margin-left"))-1;
$("#dian1").css("margin-left",margnLeft+"px");
}
}else {
margnLeft=-4;
$("#dian1").css("margin-left",margnLeft+"px");
}
}
setInterval(getTime,'100');
//点击事件--音量
$("#lang").mousedown(function(event){
//$("#lang").offset().left
//alert((event.pageX-$("#lang").offset().left)/$("#lang").width());
document.getElementById("audiomusic").volume=(event.pageX-$("#lang").offset().left)/$("#lang").width();
volume=document.getElementById("audiomusic").volume;
$("#jingdu").css("width",(volume*100)+"%");
if($("#jingdu").width()<10){
$("#dian").css("margin-left",0+"px");
}else if($("#jingdu").width()>($("#jingdu").width()-10)){
$("#dian").css("margin-left",-7+"px");
}
});
$("#Timejindu").mousedown(function(event){
document.getElementById("audiomusic").currentTime=(((event.pageX-$("#Timejindu").offset().left)/$("#Timejindu").width())*allTime);
});
//文本输出
content=document.getElementById("text").innerHTML.split(";");
document.getElementById("text").innerHTML="";
contents();
function contents(){
if(upindex<content.length){
if(contentindex<content[upindex].length){
var str=content[upindex];
$("#text").html(uptext+content[upindex].substr(contentindex,1)+"_");
uptext=$("#text").html().substr(0,$("#text").html().length-1);
contentindex++;
if(contentindex==content[upindex].length){
$("#text").html(uptext+"<br />");
uptext=$("#text").html();
upindex++;
contentindex=0;
}
setTimeout(contents,500);
}
}else{
return;
}
}
})
//上一首
function up(){
var src=$("#audiomusic").attr("src").substr($("#audiomusic").attr("src").indexOf("/")+1);
$("#name li:eq("+index+")").removeAttr("class");
if(index<music.length-1){
$.each(music,function(i){
if(src==music[i][0]){
index=i;
}
});
index=index+1;
}else if(index==music.length-1){
index=0;
}
title(index);
}
//暂停播放
function play(){
var audiomusic=document.getElementById("audiomusic");
if(audiomusic.paused){
audiomusic.play();
$("#center").attr("class","centers");
}else {
audiomusic.pause();//只能允许js
$("#center").attr("class","center");
}
}
//x下一首
function down(){
var src=$("#audiomusic").attr("src").substr($("#audiomusic").attr("src").indexOf("/")+1);
$("#name li:eq("+index+")").removeAttr("class");
if(index>0){
$.each(music,function(i){
if(src==music[i][0]){
index=i;
}
});
index=index-1;
}else if(index==0){
index=music.length-1;
}
title(index);
}
//声音
function muted(){
var audiomusic=document.getElementById("audiomusic");
//alert(audiomusic.muted);
if(audiomusic.muted){
audiomusic.muted = false;
$("#muted").attr("class","shengyin");
}else{
audiomusic.muted = true;
$("#muted").attr("class","shengyins");
}
}
//设置文字。。。名称等,
function title(index){
var strc="<strong>"+music[index][0]+"</strong><span class='guojia'>"+music[index][1]+"</span><span class='allname'>"+music[index][2]+"</span>";
$("#musicname").html(strc);
$("#audiomusic").attr("src","music/"+music[index][0]);
$("#imagess").attr("src","images/"+music[index][3]);
$("#name li").removeAttr("class");
$("#name li:eq("+index+")").attr("class","playmusic");
}
许多的个性化效果,需要自己去添加。。。
因为利用课余时间在做,所以有些地方没有得到完善,希望热心的各位提出一些意见