看到一个用css3实现的CD的动画，演示在这儿http://codepen.io/_kieran/pen/QNRmep

突然那我就想说给自己做一个音乐播放器吧，说做就做。演示在https://echolsx.github.io/music/

Github传送门：https://github.com/EchoLsx/music

主要代码：

<div id="background"></div>
<div id="player">

<div class="cover"></div>
<div class="ctrl">
    <div class="tag">
        <strong>Title</strong>
        <span class="artist">Artist</span>
        <span class="album">Album</span>
    </div>
    <div class="control">
            <div class="left">
                <div class="rewind icon"></div>
                <div class="playback icon"></div>
                <div class="fastforward icon"></div>
            </div>
            <div class="volume right">
                <div class="mute icon left"></div>
                <div class="slider left">
                    <div class="pace"></div>
                </div>
            </div>
        </div>
        <div class="progress">
            <div class="slider">
                <div class="loaded"></div>
                <div class="pace"></div>
                </div>
                <div class="timer left">0:00</div>
                <div class="right">
                    <div class="repeat icon"></div>
                <div class="shuffle icon"></div>
            </div>
        </div>
    </div>
</div>
<ul id="playlist"></ul>

JS部分：

   (function($){
        // Settings
        var repeat = localStorage.repeat || 0,
            shuffle = localStorage.shuffle || 'false',
            continous = true,
            autoplay = true,
            playlist = [
    {
    title: 'Lost Stars',
    artist: 'Adam Levine',
    album: 'Begin Again (Music From and Inspired By the Original Motion Picture)',
    cover:'img/1.jpg',
    mp3: 'mp3/Adam Levine - Lost Stars.mp3',
    ogg: ''
    },
    {
    title: 'Color Blind',
    artist: 'Matt B',
    album: 'LOVE AND WAR',
    cover: 'img/8.jpg',
    mp3: 'mp3/Matt B - Color Blind.mp3',
    ogg: ''
    },
    ];
    
// Load playlist
    for (var i=0; i<playlist.length; i++){
        var item = playlist[i];
        $('#playlist').append('<li>'+item.artist+' - '+item.title+'</li>');
    }

    var time = new Date(),
        currentTrack = shuffle === 'true' ? time.getTime() % playlist.length : 0,
        trigger = false,
        audio, timeout, isPlaying, playCounts;

    var play = function(){
        audio.play();
        $('.playback').addClass('playing');
        timeout = setInterval(updateProgress, 500);
        isPlaying = true;
    }

    var pause = function(){
        audio.pause();
        $('.playback').removeClass('playing');
        clearInterval(updateProgress);
        isPlaying = false;
    }


// Update progress
    var setProgress = function(value){
        var currentSec = parseInt(value%60) < 10 ? '0' + parseInt(value%60) : parseInt(value%60),
            ratio = value / audio.duration * 100;

        $('.timer').html(parseInt(value/60)+':'+currentSec);
        $('.progress .pace').css('width', ratio + '%');
        $('.progress .slider a').css('left', ratio + '%');
    }

    var updateProgress = function(){
        setProgress(audio.currentTime);
    }


// Progress slider
    $('.progress .slider').slider({step: 0.1, slide: function(event, ui){
        $(this).addClass('enable');
        setProgress(audio.duration * ui.value / 100);
        clearInterval(timeout);
    }, stop: function(event, ui){
        audio.currentTime = audio.duration * ui.value / 100;
        $(this).removeClass('enable');
        timeout = setInterval(updateProgress, 500);
    }});


// Volume slider
    var setVolume = function(value){
        audio.volume = localStorage.volume = value;
        $('.volume .pace').css('width', value * 100 + '%');
        $('.volume .slider a').css('left', value * 100 + '%');
    }

    var volume = localStorage.volume || 0.5;
    $('.volume .slider').slider({max: 1, min: 0, step: 0.01, value: volume, slide: function(event, ui){
        setVolume(ui.value);
        $(this).addClass('enable');
        $('.mute').removeClass('enable');
    }, stop: function(){
        $(this).removeClass('enable');
    }}).children('.pace').css('width', volume * 100 + '%');

    $('.mute').click(function(){
        if ($(this).hasClass('enable')){
            setVolume($(this).data('volume'));
            $(this).removeClass('enable');
        } else {
            $(this).data('volume', audio.volume).addClass('enable');
            setVolume(0);
        }
    });



// Switch track
    var switchTrack = function(i){
        if (i < 0){
            track = currentTrack = playlist.length - 1;
        } else if (i >= playlist.length){
            track = currentTrack = 0;
        } else {
            track = i;
        }

        $('audio').remove();
        loadMusic(track);
        if (isPlaying == true) play();
    }

// Shuffle
var shufflePlay = function(){
    var time = new Date(),
        lastTrack = currentTrack;
    currentTrack = time.getTime() % playlist.length;
    if (lastTrack == currentTrack) ++currentTrack;
    switchTrack(currentTrack);
}

// Fire when track ended
var ended = function(){
    pause();
    audio.currentTime = 0;
    playCounts++;
    if (continous == true) isPlaying = true;
    if (repeat == 1){
        play();
    } else {
        if (shuffle === 'true'){
            shufflePlay();
        } else {
            if (repeat == 2){
                switchTrack(++currentTrack);
            } else {
                if (currentTrack < playlist.length) switchTrack(++currentTrack);
            }
        }
    }
}

var beforeLoad = function(){
    var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;
    $('.progress .loaded').css('width', (100 / (this.duration || 1) * endVal) +'%');
}

// Fire when track loaded completely
var afterLoad = function(){
    if (autoplay == true) play();
}

// Load track
var loadMusic = function(i){
    var item = playlist[i],
        newaudio = $('<audio>').html('<source src="'+item.mp3+'"><source src="'+item.ogg+'">').appendTo('#player');
    
    $('.cover').html('<img src="'+item.cover+'" alt="'+item.album+'">');
    $('.tag').html('<strong>'+item.title+'</strong><span class="artist">'+item.artist+'</span><span class="album">'+item.album+'</span>');
    $('#playlist li').removeClass('playing').eq(i).addClass('playing');
    audio = newaudio[0];
    audio.volume = $('.mute').hasClass('enable') ? 0 : volume;
    audio.addEventListener('progress', beforeLoad, false);
    audio.addEventListener('durationchange', beforeLoad, false);
    audio.addEventListener('canplay', afterLoad, false);
    audio.addEventListener('ended', ended, false);
}

loadMusic(currentTrack);
$('.playback').on('click', function(){
    if ($(this).hasClass('playing')){
        pause();
    } else {
        play();
    }
});
$('.rewind').on('click', function(){
    if (shuffle === 'true'){
        shufflePlay();
    } else {
        switchTrack(--currentTrack);
    }
});
$('.fastforward').on('click', function(){
    if (shuffle === 'true'){
        shufflePlay();
    } else {
        switchTrack(++currentTrack);
    }
});
$('#playlist li').each(function(i){
    var _i = i;
    $(this).on('click', function(){
        switchTrack(_i);
    });
});

if (shuffle === 'true') $('.shuffle').addClass('enable');
if (repeat == 1){
    $('.repeat').addClass('once');
} else if (repeat == 2){
    $('.repeat').addClass('all');
}

$('.repeat').on('click', function(){
    if ($(this).hasClass('once')){
        repeat = localStorage.repeat = 2;
        $(this).removeClass('once').addClass('all');
    } else if ($(this).hasClass('all')){
        repeat = localStorage.repeat = 0;
        $(this).removeClass('all');
    } else {
        repeat = localStorage.repeat = 1;
        $(this).addClass('once');
    }
});

    $('.shuffle').on('click', function(){
        if ($(this).hasClass('enable')){
            shuffle = localStorage.shuffle = 'false';
            $(this).removeClass('enable');
        } else {
            shuffle = localStorage.shuffle = 'true';
            $(this).addClass('enable');
        }
    });
})(jQuery);