readme

<script>
    var musicList = []
    var currentIndex = 0
    var clock
    var audio = new Audio()
    audio.autoplay = true
    getMusicList(function (List) {
            musicList = List
            LoadMusic(List[currentIndex])       //运行

        }
    )



    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
            $('.content .time').innerText = min + ':' + sec           //播放时间

        },1000)



    }
    audio.onpause = function () {
        clearInterval(clock)

    }
    audio.onended = function () {
        currentIndex =  (++currentIndex)%musicList.length   //播放完后加载下一首
        LoadMusic(musicList[currentIndex])

    }

    $('.control .muc').onclick = function () {
        if(audio.paused){
            $('.control .muc').innerHTML = '&#xe715;'    //点击播放并且修改图标样式


            audio.play()


        }else {
            $('.control .muc').innerHTML = '&#xe617;'  //点击暂停并且修改图标样式
            audio.pause()

        }
    }
    $('.control .forward').onclick = function () {
        currentIndex = (++currentIndex)%musicList.length
        console.log(currentIndex)                                       //点击前进图标播放下一首
        LoadMusic(musicList[currentIndex])
    }
    $('.control .back').onclick = function () {
        currentIndex = (musicList.length + --currentIndex)%musicList.length   //点击后退图标播放上一首
        console.log(currentIndex)
        LoadMusic(musicList[currentIndex])
    }


    function $(selector) {
        return document.querySelector(selector)

    }
    function getMusicList(callback){
        var xhr = new XMLHttpRequest()
        xhr.open('GET','/music.json',true)  //获取json
        xhr.onload = function () {
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
                callback(JSON.parse(this.responseText))  
            }else {
                console.log('failed')
            }
                                                        //是否获取json文件里面的信息
        }
        xhr.onerror = function () {
            console.log('network anomailes')
        }
        xhr.send()
    }
    function LoadMusic(musicObj) {
        console.log('begin play',musicObj)
        $('.content .username').innerText = musicObj.title                      //修改
        $('.content .username').innerText = musicObj.auther
       $(' header').style.background = 'url('+ musicObj.img + ') no-repeat 0 center   '   //点击会修改背景图片
        $(' header').style.backgroundSize = 'cover'      //设置样式
        audio.src = musicObj.src
    }



</script>

推荐阅读更多精彩内容