js-音乐播放器，播放|暂停|滑块的功能

最新推荐文章于 2024-05-10 09:47:46 发布

weixin_30693683

最新推荐文章于 2024-05-10 09:47:46 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qshting/p/5733278.html

本文介绍了一个简单的音乐播放器交互设计实现，包括播放/暂停功能、进度显示及拖动调整等核心功能。通过JavaScript实现了播放按钮状态切换、时间更新显示以及进度条拖动等功能。

音乐播放器，播放|暂停|滑块的功能

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;

        }

    }


});