function ChongAudio(el, option) { this.audios = el || document.getElementsByClassName('music-audio')[0]; this.progressIng = $('.progress-ing'); this.t = 0; // 当前秒数 this.duration = 0; // 音乐总时长 this.progressIngNum = 0; // 当前播放进度百分比 this.isMouse = false; // 是否拖拽 this._progress = 0; // 当前移动进度百分比 this.timer = null; // 延时器,每500毫秒监听当前播放秒数渲染当前进度 this.isPalying = false; // 是否在播放 this.audioRefTimer = true; // 音频刷新定时器 var _this = this; //初始化音频时长 this.init = function (duration) { var duration = duration ? duration : '00:00'; $('.music-max').html(timeleng(duration)); }; // 播放 this.play = function (duration) { _this.audios.play(); _this.isPalying = true; _this.audioRefTimer = true _this.duration = duration ? duration : _this.audios.duration; $('.music-max').html(timeleng(_this.duration)); _this.audioTimer(); }; // 暂停 this.pause = function () { _this.audioRefTimer = false _this.audios.pause(); }; // 停止 this.stop = function () { _this.t = 0; _this.audios.currentTime = 0; _this.audios.pause(); _this.isPalying = false; this.progressIng.css('width', 0 + '%'); $('.music-cur').text(timeleng(0)); $('#audio_play').css('display', 'block'); $('#audio_pause').css('display', 'none'); _this.audioRefTimer = false }; // 监听播放状态 // 暂停 this.audios.addEventListener('pause', function (e) { $('#audio_play').css('display', 'block'); $('#audio_pause').css('display', 'none'); _this.isPalying = false; }); // 监听播放状态 // 播放中 this.audios.addEventListener('playing', function (e) { $('#audio_play').css('display', 'none'); $('#audio_pause').css('display', 'block'); }); // 监听播放状态 // 停止 this.audios.onended = function () { _this.stop(); }; // 控制当前播放进度条 this.audioTimer = function () { if(_this.audioRefTimer == false){ return; } _this.t = parseInt(Math.round(_this.audios.currentTime)); _this.progressIngNum = (_this.t / _this.duration) * 100; $('.progress-ing').css('width', _this.progressIngNum + '%'); $('.music-range').val(_this.t); $('.music-cur').text(timeleng(_this.t)); _this.t = parseInt(_this.audios.currentTime); if (_this.t < _this.duration) { $('#audio_play').css('display', 'none'); $('#audio_pause').css('display', 'block'); timer = setTimeout(_this.audioTimer, 500); } else { $('#audio_play').css('display', 'block'); $('#audio_pause').css('display', 'none'); _this.audioRefTimer = false; } }; // 滑块监听鼠标按下 $('.progress').mousedown(function (e) { console.log('-------------------------'); console.log(_this.isPalying); if (!_this.isPalying) return; var oDiv1 = $('.progress'); var oDiv2 = $('.progress-ing'); var oDiv3 = $('.progress-ing-button'); var mouseStart = 0; var mouseEnd = 0; _this.isMouse = true; mouseStart = e.clientX; var downLg = e.clientX - oDiv3.offset().left; // 滑块监听鼠标移动 $(document).mousemove(function (e) { if (!_this.isMouse) return; var clientX = e.clientX; var moveLg = clientX - downLg; if (moveLg < 0) { moveLg = 0; } else if (moveLg > oDiv1.offset().width - oDiv3.offset().width + 20) { moveLg = oDiv1.offset().width - oDiv3.offset().width; } _this._progress = parseInt( ((moveLg - oDiv1.offset().left) / oDiv1.width()) * 100 ); oDiv2.css('width', _this._progress + '%'); }); // 滑块监听鼠标松开 $(document).mouseup(function (e) { if (!_this.isMouse) { return; } if (_this._progress > 0) { _this.audios.currentTime = parseFloat(_this.duration * _this._progress) / 100; } else if (_this._progress >= 110) { _this.audios.currentTime = 0; _this.duration = 0; _this.audios.pause(); $('.progress-ing').css('width', 0 + '%'); _this.audioRefTimer = false; $('#audio_play').css('display', 'block'); $('#audio_pause').css('display', 'none'); } document.onmousemove = null; document.onmousedown = null; document.onmouseup = null; _this.isMouse = false; }); }); $('.progress .progress-ing-button').on('touchstart', function (e) { // if (!_this.isPalying) return; var oDiv1 = $('.progress'); var oDiv2 = $('.progress-ing'); var oDiv3 = $('.progress-ing-button'); var mouseStart = 0; var mouseEnd = 0; _this.isMouse = true; mouseStart = e.originalEvent.changedTouches[0].clientX; var downLg = e.originalEvent.changedTouches[0].clientX - oDiv3.offset().left; $('.progress .progress-ing-button').on('touchmove', function (e) { if (!_this.isMouse) return; var clientX = e.originalEvent.changedTouches[0].clientX ; var moveLg = clientX - downLg; if (moveLg < 0) { moveLg = 0; } else if (moveLg > oDiv1.offset().width - oDiv3.offset().width + 20) { moveLg = oDiv1.offset().width - oDiv3.offset().width; } _this._progress = parseInt( ((moveLg - oDiv1.offset().left) / oDiv1.width()) * 100 ); oDiv2.css('width', _this._progress + '%'); }); $(document).on('touchend', function (e) { if (!_this.isMouse) { return; } if (_this._progress > 0) { _this.audios.currentTime = parseFloat(_this.duration * _this._progress) / 100; } else if (_this._progress >= 110) { _this.audios.currentTime = 0; _this.duration = 0; _this.audios.pause(); $('.progress-ing').css('width', 0 + '%'); _this.audioRefTimer = false; $('#audio_play').css('display', 'block'); $('#audio_pause').css('display', 'none'); } document.onmousemove = null; document.onmousedown = null; document.onmouseup = null; _this.isMouse = false; }); }); } // 获取播放时间 function timeleng(time) { var m = 0, s = 0, ms = '00', ss = '00'; time = Math.floor(time % 3600); m = Math.floor(time / 60); s = Math.floor(time % 60); ss = s < 10 ? '0' + s : s + ''; ms = m < 10 ? '0' + m : m + ''; return ms + ':' + ss; }