音乐播放器JS代码部分要点注释

一个简单音乐播放器JS部分进行回顾注释，总代码为https://bigxingxing.github.io/MusicPlayer/music1.html这里的源代码

var musicList = []
    var currentIndex = 0
    var clock
    var audio =new Audio()
    audio.autoplay = true
    getMusicList(function(list){
        musicList = list
        loadMusic(list[currentIndex])
        setPlaylist(list)     //list就是下面callback回调函数的参数，将AJAX传过来的音乐数据传递到musicList中
    })
    audio.ontimeupdate = function(){
        console.log(this.currentTime)
        $('.musicbox .progress-now').style.width = (this.currentTime/this.duration)*100+'%'
        
    }
    audio.onplay = function(){
        clock = setInterval(function(){
        var min = Math.floor(audio.currentTime/60)
        var sec = Math.floor(audio.currentTime)%60+''
        sec = sec.length === 2? sec :'0' + sec

        $('.musicbox .time').innerText = min + ':' + sec
    },1000) //设置了1秒一次的定时器，将秒数转换为分秒形式
    }
    audio.onpause = function(){
        clearInterval(clock)
    }
    audio.onended= function(){
        currentIndex = (++currentIndex)%musicList.length
        console.log(currentIndex)
        loadMusic(musicList[currentIndex]) //播放结束后的操作，和下一首类似
    }
    $('.musicbox .play').onclick = function(){
        if(audio.paused){
            audio.play()
            this.querySelector('.fa').classList.remove('fa-play')
            this.querySelector('.fa').classList.add('fa-pause')
        }else{
            audio.pause()
            this.querySelector('.fa').classList.remove('fa-pause')
            this.querySelector('.fa').classList.add('fa-play')
        }
        
    }
    $('.musicbox .forward').onclick =function(){
        currentIndex = (++currentIndex)%musicList.length
        console.log(currentIndex)
        loadMusic(musicList[currentIndex])//正向顺序读取的方式，很是巧妙
    }
    $('.musicbox .back').onclick =function(){
        currentIndex =(musicList.length+(--currentIndex))%musicList.length
        console.log(currentIndex)
        loadMusic(musicList[currentIndex])//反向读取的方式，数学学得不够好，很难自己琢磨出来
    }
    
    $('.musicbox .bar').onclick = function(e){
        console.log(e)
        var percent = e.offsetX / parseInt(getComputedStyle(this).width)
        console.log(percent)
        audio.currentTime = percent * audio.duration  //点击进度条使歌曲跳到相应部分的操作，利用进度条当前的宽度比上总宽度得到系数
    }
    $('.musicbox .list').onclick = function(e){
      if(e.target.tagName.toLowerCase() === 'li'){
        for(var i = 0; i < this.children.length; i++){
          if(this.children[i] === e.target){
            musicIndex = i
          }
        }
        console.log(musicIndex)
        loadMusic(musicList[musicIndex])  //List内相对应的歌曲，通过for和if组合使播放
      }
    }
    function $(selector){
        return document.querySelector(selector)
    }

    function getMusicList(callback){
    var xhr = new XMLHttpRequest()
    xhr.open('GET','/music.json',true)
    xhr.onload = function(){
        if ((xhr.status >=200 && xhr.status <300) || xhr.status === 304){
        
            callback(JSON.parse(this.responseText))
        }else {
        console.log('获取数据失败')
        }
    xhr.onerror =function(){
        console.log('网络异常')   //ajax获取数据
        }
    }
     xhr.send()
    }
    function loadMusic(musicObj){
    console.log('begin play',musicObj)
     
     $('.musicbox .title').innerText = musicObj.title
     $('.musicbox .auther').innerText = musicObj.auther
     $('.cover').style.backgroundImage ='url('+ musicObj.img+ ')'
     audio.src = musicObj.src
    }
    function setPlaylist(musiclist){
      var container = document.createDocumentFragment()
      musiclist.forEach(function(musicObj){
        var node = document.createElement('li')
        node.innerText = musicObj.auther + '-' + musicObj.title
        console.log(node)
        container.appendChild(node)
      })
      $('.musicbox .list').appendChild(container)//创建了一个文档碎片，并且让每一个音乐数据都生成一个li，来产生List
    }