播放音乐的html代码,音乐播放器-html代码

音乐播放器

#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;

}

Aduio 元素的解析

当前时间：

播放时间：

剩余时间：

开始

暂停

静音

开启音量

---

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.οnmοusemοve=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);

}

}

​

​

​