Custom Html 5 Audioplayer

<style>
    body {
        background: #777
    }

    .firePlayer {
        background: #ffffff;
        color: #0f469b;
        width: auto;
        height: 40px;
        margin: 20px;
        border-radius: 100px;
        font-size: 15px;
        font-weight: normal;
        font-family: Montserrat,
        Helvetica Neue,
        Helvetica,
        sans-serif;
    }

    .firePlayer .controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        height: 100%;
    }

    .firePlayer audio {
        width: 0;
    }

    .button-wrap .audio-play {
        background: url("https://dc69b531ebf7a086ce97-290115cc0d6de62a29c33db202ae565c.ssl.cf1.rackcdn.com/285/radio-icon-play.png") no-repeat;
        background-size: 100%;
        border: 0;
        height: 20px;
        width: 20px;
        margin: 0 10px 0 0;
        padding: 0;
        outline: 0;
        transition: all .2s linear;
        top: 2px;
    }

    .button-wrap .audio-play.playing {
        background: url("https://dc69b531ebf7a086ce97-290115cc0d6de62a29c33db202ae565c.ssl.cf1.rackcdn.com/285/radio-icon-pause.png") no-repeat;
        background-size: 100%;
    }

    .button-wrap .audio-play:hover {
        cursor: pointer;
    }

    .button-wrap .audio-pause {
        display: none;
    }

    .button-wrap .audio-status {
        display: none;
    }

    .progress-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        justify-content: space-between;
    }

    .progress-wrap .audio-seekbar {
        width: 100%;
        background: #0f469b;
        height: 5px;
    }

    .progress-wrap .audio-slide {
        width: 0;
        background: #FF000B;
        height: 5px;
    }

    .progress-wrap .audio-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: opacity 1s ease;
    }

    .progress-wrap .audio-current-time {
        margin-right: 10px;
        width: 50px;
    }

    .progress-wrap .audio-length {
        margin-left: 10px;
    }

    @-moz-document url-prefix() {
        .button-wrap .audio-play {
            height: 24px;
        }
    }
</style>

<div class="firePlayer">
    <div class="controls">
        <audio id="audio-one" src="https://dc69b531ebf7a086ce97-290115cc0d6de62a29c33db202ae565c.ssl.cf1.rackcdn.com/687/Family_Guy_-_Peanut_Butter_Jelly_Time.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
        <div class="button-wrap">
            <button class="audio-play" id="audio-btn-one"></button>
        </div>
        <div class="progress-wrap">
            <div class="audio-current-time">0:00</div>
            <div class="audio-seekbar" value="0" max="1" id="timeline">
                <div class="audio-slide" id="playhead"></div>
            </div>
            <div class="audio-length">0:00</div>
        </div>
    </div>
</div>

<div class="firePlayer">
    <div class="controls">
        <audio id="audio-two" src="https://dc69b531ebf7a086ce97-290115cc0d6de62a29c33db202ae565c.ssl.cf1.rackcdn.com/687/Rocket_Man_by_Stewie.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
        <div class="button-wrap">
            <button class="audio-play" id="audio-btn-one"></button>
        </div>
        <div class="progress-wrap">
            <div class="audio-current-time">0:00</div>
            <div class="audio-seekbar" value="0" max="1" id="timeline">
                <div class="audio-slide" id="playhead"></div>
            </div>
            <div class="audio-length">0:00</div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
    // =====	Audio Player JS ===== //
    $('#audio-one').each(function() {
        $(this).on("ended", function() {
            this.play();
        }, false);
        // Audio Duration Timers
        $(this).on("canplay", function() {
            var s = parseInt(this.duration % 60);
            s = ('0' + s).slice(-2);
            var m = parseInt((this.duration / 60) % 60);
            $(this).siblings('.progress-wrap').find(".audio-length").text(m + ':' + s);
        });
        $(this).on("timeupdate", function() {
            var s = parseInt(this.currentTime % 60);
            s = ('0' + s).slice(-2);
            var m = parseInt((this.currentTime / 60) % 60);
            $(this).siblings('.progress-wrap').find(".audio-current-time").text(m + ':' + s);
        });
        // Audio Progress Bar
        $(this).on('timeupdate', function() {
            var currentTime = this.currentTime;
            var duration = this.duration;
            $(this).siblings('.progress-wrap').find('.audio-seekbar .audio-slide').animate({
                'width': (currentTime) / duration * 100 + '%'
            }, 250, 'linear');
        });
        // Play/Pause Audio
        $(this).siblings('.button-wrap').find('.audio-play').on("click", function() {
            if (!$(this).parents().siblings('audio')[0].paused) {
                $(this).parents().siblings('audio')[0].pause();
                $(this).removeClass('playing');
            } else {
                $(this).parents().siblings('audio')[0].play();
                $(this).addClass('playing');
            }
        });
    });
    $('#audio-two').each(function() {
        $(this).on("ended", function() {
            this.play();
        }, false);
        // Audio Duration Timers
        $(this).on("canplay", function() {
            var s = parseInt(this.duration % 60);
            s = ('0' + s).slice(-2);
            var m = parseInt((this.duration / 60) % 60);
            $(this).siblings('.progress-wrap').find(".audio-length").text(m + ':' + s);
        });
        $(this).on("timeupdate", function() {
            var s = parseInt(this.currentTime % 60);
            s = ('0' + s).slice(-2);
            var m = parseInt((this.currentTime / 60) % 60);
            $(this).siblings('.progress-wrap').find(".audio-current-time").text(m + ':' + s);
        });
        // Audio Progress Bar
        $(this).on('timeupdate', function() {
            var currentTime = this.currentTime;
            var duration = this.duration;
            $(this).siblings('.progress-wrap').find('.audio-seekbar .audio-slide').animate({
                'width': (currentTime) / duration * 100 + '%'
            }, 250, 'linear');
        });
        // Play/Pause Audio
        $(this).siblings('.button-wrap').find('.audio-play').on("click", function() {
            if (!$(this).parents().siblings('audio')[0].paused) {
                $(this).parents().siblings('audio')[0].pause();
                $(this).removeClass('playing');
            } else {
                $(this).parents().siblings('audio')[0].play();
                $(this).addClass('playing');
            }
        });
    });
</script>