版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wbdsr234/article/details/68941827
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0}
body{font-size: 12px;color: #EEEEEE; font-family:arial "微软雅黑";}
ul,li{list-style: none;}
.container{width:320px;background:#333333;margin:0 auto;color: #EEEEEE;overflow: hidden;}
#player .info{margin: 20px 10px;overflow: hidden;line-height: 22px;}
#player .info .title{font-size: 14px;color: #FFFFFF;}
#player .info .img{width:120px;float: left;}
#player .info .img img{width:100%;border-radius: 5px;box-shadow: 0 2px 6px rgba(0,0,0,0.5);}
#player .info .minfo{float: right;width:170px;overflow: hidden;}
#player .info .minfo .text{white-space: nowrap;}
#player .info .minfo .control .icon{display: inline-block;width:24px;height:24px;cursor: pointer;}
#player .info .minfo .control .before{background: url(img/audio/before.png) center no-repeat;opacity: 0.6;}
#player .info .minfo .control .playing{background:url(img/audio/play.png) center no-repeat;opacity: 0.6;}
#player .info .minfo .control .pauseing{background:url(img/audio/pause.png) center no-repeat;opacity: 0.6;}
#player .info .minfo .control .after{background: url(img/audio/after.png) center no-repeat; opacity:0.6 ;}
#player .info .minfo .control .volume{background: url(img/audio/volume.png) center no-repeat; opacity: 0.6;float:right ;}
#player .info .minfo .control .mute{background: url(img/audio/mute.png) center no-repeat;opacity: 0.6;float:right ;}
#playlist{margin:20px 10px;padding:0 10px;border-radius: 5px;background: #191919;box-shadow: 0 2px 6px rgba(0,0,0,0.5);line-height: 24px;}
</style>
</head>
<body>
<div class="container">
<div id="player">
<div class="info">
<div class="img"></div>
<div class="minfo">
<div class="text title"></div>
<div class="text artist"></div>
<div class="text album"></div>
<div class="control">
<div class="icon before"></div>
<div class="icon pause pauseing"></div>
<div class="icon after"></div>
<div class="icon muted volume"></div>
</div>
</div>
</div>
</div>
<ul id="playlist"></ul>
</div>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var playlist = [
{
"title": "chenparty",
"artist": "德国童声",
"album": "超好听的德国童声",
"img": "img/audio/1.jpg",
"mp3": "music/1.mp3"
},
{
"title": "德国第一装甲师进行曲",
"artist": "德国",
"album": "德国第一装甲师进行曲",
"img":"img/audio/2.jpg",
"mp3": "music/2.mp3"
},
{
"title": "亡灵序曲",
"artist": "魔兽世界",
"album": "魔兽世界 - 亡灵序曲",
"img": "img/audio/3.jpg",
"mp3": "music/3.mp3"
}
];
var current = 0;
var count = 3;
var autoplay = true;
var pause = false;
var muted = false;
var audio;
function createList(arr){
if(arr!=null)
{
$.each(arr,function(i,element){
var li = $("<li>"+element.title+"</li>");
$("#playlist").append(li);
})
}
}
createList(playlist);
function afterLoad(){
if(autoplay)
{
if(muted)
{
audio.muted = true;
}
audio.play();
}
}
function ended(){
$("audio").remove();
if(current+1==count)
{
current=0;
loadMusic(current);
}
else{
current++;
loadMusic(current);
}
}
function timeupdate(){
console.log("a");
}
function loadMusic(i){
var item = playlist[i];
var newaudio = $("<audio>").html("<source src='"+item.mp3+"'>").appendTo("#player");
$("#player .img").html("<img src="+item.img+">");
$("#player .title").text(item.title);
$("#player .artist").text(item.artist);
$("#player .album").text(item.album);
audio = newaudio[0];
audio.addEventListener("canplay",afterLoad,false);
audio.addEventListener("ended",ended,false);
}
loadMusic(current);
$(".pause").on("click",function(){
if(!pause)
{
pause = true;
audio.pause();
$(this).removeClass("pauseing").addClass("playing");
}
else{
pause = false;
audio.play();
$(this).removeClass("playing").addClass("pauseing");
}
})
$(".before").on("click",function(){
$("audio").remove();
if(current==0)
{
current=count-1;
loadMusic(current);
}
else{
current--;
loadMusic(current);
}
})
$(".after").on("click",function(){
$("audio").remove();
if(current+1==count)
{
current=0;
loadMusic(current);
}
else{
current++;
loadMusic(current);
}
})
$(".muted").on("click",function(){
console.log(audio.muted);
if(!audio.muted)
{
audio.muted = true;
muted = true;
$(this).removeClass("volume").addClass("mute");
}
else{
audio.muted = false;
$(this).removeClass("mute").addClass("volume");
}
})
})
</script>
</body>
</html>
