|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>音乐播放器</title>
<style>
#prograss{height:30px;width:640px;background:#111;position:relaive;}
#prograss .percent{width:20%;background:red;height:30px;position:absolute;}
#prograss span.f{width:20px;height:30px;background:green;display:inline-block;
position:absolute;
z-index:2;
}
#prograss span.s{width:100%;height:30px;background:transparent;display:inline-block;
position:absolute;
}
</style>
</head>
<body>
<audio src="1.mp3" id="audioDom" controls="controls">
</audio>
<fieldset>
<legend>Aduio 元素的解析</legend>
当前时间：<div id="timer"></div>
播放时间：<div id="timeLong"></div>
剩余时间：<div id="timeLast"></div>
<a href="javascript:void(0)" id="play">开始</a>
<a href="javascript:void(0)" id="stop">暂停</a>
<a href="javascript:void(0)" id="staticVolume">静音</a>
<a href="javascript:void(0)" id="openVolume">开启音量</a>
<hr/>
<div id = "prograss">
<div class = "percent"></div>
<span class="f"></span>
<span class="s"></span>
</div>
</fieldset>
<script type ="text/javascript">
window.onload = function(){
var audioDom = $("audioDom");
audioDom.oncanplaythrough = function(){
$("timer").innerHTML = getTime(this.duration);
};
audioDom.ontimeupdate = function(){
// $("timer").innerHTML = getTime(this.duration);
$("timeLong").innerHTML = getTime(this.currentTime);
$("timeLast").innerHTML = getTime(this.duration - this.currentTime);
$("prograss").children[0].style.width = ((this.currentTime / this.duration) * 100) +"%"
};
//开始
$("play").onclick = function(){
audioDom.play();
}
//暂停
$("stop").onclick = function(){
audioDom.pause();
}
var v =0;
//静音
$("staticVolume").onclick = function(){
v = audioDom.volume;
audioDom.volume = 0;
}
//开启音量
$("openVolume").onclick = function(){
audioDom.volume = v;
}
//拖拽
drag();
//时间转换
function getTime(timer){
var m =parseInt( timer / 60);
var s =parseInt( timer % 60);
m = m <10 ?"0" +m : m;
s = s <10 ?"0" +s : s;
return m +":"+s;
}
//拖拽
function drag(){
$("prograss").children[1].onmousedown = function(e){
var ev =e || window.event;
var targetDom =this;
var x = ev.clientX;
var y = ev.clientY;
var l =targentDom.offsetLeft;
var t = targetDom.offsetTop;
var mv =targetDom.parentElement.offsetWidth - targetDom.offsetWidth;
document.onmousemove=function(e){
var evv = e || window.event;
var nl = evv.clientX -x -l;
if(nl<=0 ) nl=0;
if(nl>mv) nl = mv;
var p =(nl /mv)*100;
targetDom.style.left = nl+"px";
$("prograss").children[0].style.width = ((this.currentTime / this.duration) * 100)+"%";
audioDom.currentTime =totalTimer * p;
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup =null;
}
}
}
$("prograss").children[2].onmousedown = function(e){
var ev =e || window.event;
var x =ev.clientX;
var nl = x - this.parentElement.offsetLeft;
$("prograss").children[0].style.width = nl+"px"
$("prograss").children[1].style.left = nl+"px"
}
//获取id
function $(id){
return document.getElementById(id);
}
}
</script>
</body>
</html>
|
