Music Player

index.html

<div id="player">
  <span id="playback" class="fa fa-play fa-lg"></span>
</div>
<audio>
    <source id="sourceOgg" type="audio/ogg" />
    <source id="sourceMp3" type="audio/mpeg" />
</audio>

music-player.markdown

Music Player

A Pen by Haruka on CodePen.

License.

script.js

$( document ).ready(function() {
    var song = document.getElementsByTagName('audio')[0];
    song.load();
});
$(function () {
    var song = document.getElementsByTagName('audio')[0],
        sourceOgg = document.getElementsByTagName('audio')[0],
        sourceMp3 = document.getElementsByTagName('audio')[0];

    sourceOgg.src = 'http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.ogg';
    sourceMp3.src = 'http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a';

    $('#player').click(function (e) {
        e.preventDefault();
        if (song.paused) song.play();
        else song.pause();
    });
    $('#player').bind('click', function() {
        if ($('#playback').attr('class') == 'fa fa-pause fa-lg beat')
            $('#playback').attr('class', 'fa fa-play fa-lg');
        else
            $('#playback').attr('class', 'fa fa-pause fa-lg beat');
    });
    song.addEventListener('ended', function () {
        song.pause();
        song.currentTime = 0;
        $('#playback').attr('class', 'fa fa-play fa-lg');
    });
});

scripts

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

style.css

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
 *, *:before, *:after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background: #333;
}
#player {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -80px 0 0 -60px;
}
#player:after {
    position: absolute;
    content:'';
    width: 150px;
    height: 150px;
    left: 0;
    background: -webkit-linear-gradient(-45deg, rgba(102, 204, 204, 0.6) 0%, rgba(102, 204, 102, 0.9) 100%);
    background: linear-gradient(-45deg, rgba(102, 204, 204, 0.6) 0%, rgba(102, 204, 102, 0.9) 100%);
    border-radius: 25px;
    box-shadow: 0 0 20px -5px #fff, inset 0 0 10px #fff, inset 0 70px rgba(255, 255, 255, 0.2);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#playback {
    position: absolute;
    color: rgba(102, 204, 255, 1);
    text-shadow: 0 0 40px #000;
}
.fa-play {
    top: 45px;
    left: 55px;
}
.fa-pause {
    top: 45px;
    left: 40px;
}
.fa-lg {
    font-size: 5.3em;
}
@-webkit-keyframes beat {
    0% {
        -webkit-transform: scale(1);
        text-shadow: 0 0 40px #000;
    }
    50% {
        -webkit-transform: scale(1.1);
        text-shadow: 0 0 10px #000;
    }
    100% {
        -webkit-transform: scale(1);
        text-shadow: 0 0 40px #000;
    }
}
@keyframes beat {
    0% {
        transform: scale(1);
        text-shadow: 0 0 40px #000;
    }
    50% {
        transform: scale(1.1);
        text-shadow: 0 0 10px #000;
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 40px #000;
    }
}
.beat {
    -webkit-animation: beat 0.8s ease 0s infinite normal;
    animation: beat 0.8s ease 0s infinite normal;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />