<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>666</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
* {
margin: 0;
padding: 0;
font-family: 微软雅黑;
}
#div1 {
width: 200px;
height: 200px;
background: #ccc;
}
a.on{
background: url("./material/play.gif") no-repeat right center;
padding-right: 50px;
}
</style>
<script>
function AudioList(options){
options=options||{};
this.audio=options.audio||new Audio();
this.oBtn1=options.btn1||null;
this.oBtn2=options.btn2||null;
this.oBtn3=options.btn3||null;
this.oBtn4=options.btn4||null;
this.items=options.items||[];
this.data=options.data||[];
this.state=options.state||2; //默认播放状态
this.now=0;
this.init();//初始化
}
AudioList.prototype.play=function(){
this.items[this.now].className=‘on‘;
this.audio.src=‘./material/mp3/‘+this.data[this.now].src+‘.mp3‘;
this.audio.play();
};
AudioList.prototype.clearAllClass=function(){
for (var i = 0; i < this.items.length; i++) {
this.items[i].className = ‘‘;
}
};
AudioList.prototype.rnd=function(n,m){
return parseInt(n+Math.random()*(m-n))
};
AudioList.prototype.init=function(){
var _this=this;
for(var i=0;i<this.items.length;i++){
(function(index){
_this.items[i].ondblclick=function(){
_this.now = index;//更新当前所有
_this.clearAllClass();
_this.play();
};
})(i);
}
if(this.obtn1){
this.oBtn1.onclick=function(){_this.state=1};
};
this.obtn2 && (this.oBtn2.onclick=function(){_this.state=2});
this.obtn3 && (this.oBtn3.onclick=function(){_this.state=3});
this.obtn4 && (this.oBtn4.onclick=function(){_this.state=4});
this.audio.onended=function(){
switch (_this.state){
case 1:
_this.audio.play();
break;
case 2:
_this.clearAllClass();
if(_this.now<_this.data.length){
_this.now++;
_this.play();
}
break;
case 3:
_this.clearAllClass();
_this.now=_this.rnd(0,_this.data.length);
_this.play();
break;
case 4:
_this.clearAllClass();
_this.now++;
if(_this.now>=_this.data.length){
_this.now=0;
_this.play();
}
break;
}
};
}
</script>
</head>
<body>
<audio id="a1" controls></audio>
<ul>
<li><a href="javascript:;">小苹果</a></li>
<li><a href="javascript:;">千千阙歌</a></li>
<li><a href="javascript:;">夜的钢琴曲</a></li>
<li><a href="javascript:;">时间都去哪了</a></li>
<li><a href="javascript:;">鱼的硬件</a></li>
</ul>
<!--<input type="button" value="单曲循环" id="btn1">-->
<input type="button" value="顺序播放" id="btn2">
<input type="button" value="随机播放" id="btn3">
<input type="button" value="循环播放" id="btn4">
<script>
new AudioList({
audio:document.querySelector(‘#a1‘),
items:document.querySelectorAll(‘ul li a‘),
// btn1:document.querySelector(‘#btn1‘),
btn2:document.querySelector(‘#btn2‘),
btn3:document.querySelector(‘#btn3‘),
btn4:document.querySelector(‘#btn4‘),
// state:4,//40
data:[
{name:‘小苹果‘,src:‘小苹果‘},
{name:‘千千阙歌‘,src:‘千千阙歌‘},
{name:‘夜的钢琴曲‘,src:‘夜的钢琴曲‘},
{name:‘时间都去哪了‘,src:‘时间都去哪儿了‘},
{name:‘鱼的硬件‘,src:‘雨的印记‘},
]
});
</script>
</body>
</html>
