音乐播放器,播放|暂停|滑块的功能
document.addEventListener('DOMContentLoaded', function loaded(event) { var audio = document.getElementById("aud"); var Oplay = document.getElementById("play"); var Oimg = document.getElementById("Img"); var isProcess = 0; //记录是否触发进度条点按 /* var ProcessLine = document.getElementById("ProcessLine");*/ var time = { current: document.getElementById("timenow"), total: document.getElementById("timeall") }; // 音频播放/暂停 var Onoff = false; Oplay.onclick = function(){ if(!Onoff){ Oimg.src= 'images/collect/pause.png'; audio.play(); Onoff = true; }else{ Oimg.src= 'images/collect/play.png'; audio.pause(); Onoff = false; } }; // 音频时间 audio.ontimeupdate = function() { var minute = Math.floor(audio.currentTime/60); var second = Math.floor(audio.currentTime - minute*60); var Minute = Math.floor(audio.duration/60); var Second = Math.floor(audio.duration - Minute*60); var scale = audio.currentTime/audio.duration*100; Process.style.width = scale + '%'; ProcessLine.style.left = scale + '%'; time.current.innerHTML =toTwo( minute)+':'+ toTwo(second); time.total.innerHTML = toTwo(Minute)+':'+toTwo(Second); }; function toTwo ( n ) { return n < 10 ? '0' + n : '' + n; } //封装移动 var ProcessLine = document.getElementById('ProcessLine'); var Process = document.getElementById("Process"); var Div1 = document.getElementById('allLine'); var iMaxLeft = Div1.offsetWidth - ProcessLine.offsetWidth; drag(ProcessLine); function drag(obj) { obj.onmousedown = function(ev) { var ev = ev || event; var disX = ev.clientX - this.offsetLeft; if ( obj.setCapture ) { obj.setCapture(); } document.onmousemove = function(ev) { var ev = ev || event; var L = ev.clientX - disX; if ( L < 0 ) { L = 0; } else if ( L > iMaxLeft ) { L = iMaxLeft; } obj.style.left = L + 'px'; Process.style.width = L/iMaxLeft*100 + '%'; time.current.innerHTML =toTwo( minute)+':'+ toTwo(second); } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; //释放全局捕获 releaseCapture(); if ( obj.releaseCapture ) { obj.releaseCapture(); } } return false; } } });