4个小时实现一个HTML5音乐播放器

const Util = {
    leftDistance: (el) => {
        let left = el.offsetLeft;
        let scrollLeft;
        while (el.offsetParent) {
            el = el.offsetParent;
            left += el.offsetLeft;
        }
        scrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;
        return left - scrollLeft;
    },
    timeFormat: (time) => {
        let tempMin = parseInt(time / 60);
        let tempSec = parseInt(time % 60);
        let curMin = tempMin  tempMin) : tempMin;
        let curSec = tempSec  tempSec) : tempSec;
        return curMin + ‘:‘ + curSec;
    },
    percentFormat: (percent) => {
        return (percent * 100).toFixed(2) + ‘%‘;
    },
    ajax: (option) => {
        option.beforeSend && option.beforeSend();
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status ){
                    option.success && option.success(xhr.responseText);
                }else{
                    option.fail && option.fail(xhr.status);
                }
            }
        };
        xhr.open(‘GET‘,option.url);
        xhr.send(null);
    }
};

class skPlayer {
    constructor(option){
    }

    template(){
    }

    init(){
    }

    bind(){
    }

    prev(){
    }

    next(){
    }

    switchMusic(index){
    }

    play(){
    }

    pause(){
    }

    toggle(){
    }

    toggleList(){
    }

    toggleMute(){
    }

    switchMode(){
    }

    destroy(){
    }
}

    init(){
        this.dom = {
            cover: this.root.querySelector(‘.skPlayer-cover‘),
            playbutton: this.root.querySelector(‘.skPlayer-play-btn‘),
            name: this.root.querySelector(‘.skPlayer-name‘),
            author: this.root.querySelector(‘.skPlayer-author‘),
            timeline_total: this.root.querySelector(‘.skPlayer-percent‘),
            timeline_loaded: this.root.querySelector(‘.skPlayer-line-loading‘),
            timeline_played: this.root.querySelector(‘.skPlayer-percent .skPlayer-line‘),
            timetext_total: this.root.querySelector(‘.skPlayer-total‘),
            timetext_played: this.root.querySelector(‘.skPlayer-cur‘),
            volumebutton: this.root.querySelector(‘.skPlayer-icon‘),
            volumeline_total: this.root.querySelector(‘.skPlayer-volume .skPlayer-percent‘),
            volumeline_value: this.root.querySelector(‘.skPlayer-volume .skPlayer-line‘),
            switchbutton: this.root.querySelector(‘.skPlayer-list-switch‘),
            modebutton: this.root.querySelector(‘.skPlayer-mode‘),
            musiclist: this.root.querySelector(‘.skPlayer-list‘),
            musicitem: this.root.querySelectorAll(‘.skPlayer-list li‘)
        };
        this.audio = this.root.querySelector(‘.skPlayer-source‘);
        if(this.option.listshow){
            this.root.className = ‘skPlayer-list-on‘;
        }
        if(this.option.mode === ‘singleloop‘){
            this.audio.loop = true;
        }
        this.dom.musicitem[0].className = ‘skPlayer-curMusic‘;
    }

    bind(){
        this.updateLine = () => {
            let percent = this.audio.buffered.length ? (this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration) : 0;
            this.dom.timeline_loaded.style.width = Util.percentFormat(percent);
        };

        // this.audio.addEventListener(‘load‘, (e) => {
        //     if(this.option.autoplay && this.isMobile){
        //         this.play();
        //     }
        // });
        this.audio.addEventListener(‘durationchange‘, (e) => {
            this.dom.timetext_total.innerHTML = Util.timeFormat(this.audio.duration);
            this.updateLine();
        });
        this.audio.addEventListener(‘progress‘, (e) => {
            this.updateLine();
        });
        this.audio.addEventListener(‘canplay‘, (e) => {
            if(this.option.autoplay && !this.isMobile){
                this.play();
            }
        });
        this.audio.addEventListener(‘timeupdate‘, (e) => {
            let percent = this.audio.currentTime / this.audio.duration;
            this.dom.timeline_played.style.width = Util.percentFormat(percent);
            this.dom.timetext_played.innerHTML = Util.timeFormat(this.audio.currentTime);
        });
        //this.audio.addEventListener(‘seeked‘, (e) => {
        //    this.play();
        //});
        this.audio.addEventListener(‘ended‘, (e) => {
            this.next();
        });

        this.dom.playbutton.addEventListener(‘click‘, this.toggle);
        this.dom.switchbutton.addEventListener(‘click‘, this.toggleList);
        if(!this.isMobile){
            this.dom.volumebutton.addEventListener(‘click‘, this.toggleMute);
        }
        this.dom.modebutton.addEventListener(‘click‘, this.switchMode);
        this.dom.musiclist.addEventListener(‘click‘, (e) => {
            let target,index,curIndex;
            if(e.target.tagName.toUpperCase() === ‘LI‘){
                target = e.target;
            }else{
                target = e.target.parentElement;
            }
            index = parseInt(target.getAttribute(‘data-index‘));
            curIndex = parseInt(this.dom.musiclist.querySelector(‘.skPlayer-curMusic‘).getAttribute(‘data-index‘));
            if(index === curIndex){
                this.play();
            }else{
                this.switchMusic(index + 1);
            }
        });
        this.dom.timeline_total.addEventListener(‘click‘, (event) => {
            let e = event || window.event;
            let percent = (e.clientX - Util.leftDistance(this.dom.timeline_total)) / this.dom.timeline_total.clientWidth;
            if(!isNaN(this.audio.duration)){
                this.dom.timeline_played.style.width = Util.percentFormat(percent);
                this.dom.timetext_played.innerHTML = Util.timeFormat(percent * this.audio.duration);
                this.audio.currentTime = percent * this.audio.duration;
            }
        });
        if(!this.isMobile){
            this.dom.volumeline_total.addEventListener(‘click‘, (event) => {
                let e = event || window.event;
                let percent = (e.clientX - Util.leftDistance(this.dom.volumeline_total)) / this.dom.volumeline_total.clientWidth;
                this.dom.volumeline_value.style.width = Util.percentFormat(percent);
                this.audio.volume = percent;
                if(this.audio.muted){
                    this.toggleMute();
                }
            });
        }
    }