jPlayer 2015

jPlayer 2015

by bvotcode

HTML

<link rel="stylesheet" href="https://rawgit.com/happyworm/jPlayer/master/dist/skin/blue.monday/css/jplayer.blue.monday.css">
<script src="https://rawgit.com/happyworm/jPlayer/master/dist/jplayer/jquery.jplayer.min.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
            <div class="jp-controls">
                <button class="jp-play" role="button" tabindex="0">play</button>
                <button class="jp-stop" role="button" tabindex="0">stop</button>
            </div>
            <div class="jp-progress">
                <div class="jp-seek-bar">
                    <div class="jp-play-bar">
                        <div class="jp-ball"><div>
                    </div>
                </div>
                <div class="jp-volume-controls">
                    <button class="jp-mute" role="button" tabindex="0">mute</button>
                    <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                </div>
                <div class="jp-time-holder">
                    <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                    <div class="jp-toggles">
                        <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                    </div>
                </div>
            </div>
            <div class="jp-details">
                <div class="jp-title" aria-label="title">&nbsp;</div>
            </div>
            <div class="jp-no-solution">	<span>Update Required</span>
To play the media you will need to either update your browser to a recent...

CSS

.jp-progress{
border-radius: 160px;
}

.jp-audio, .jp-video, .jp-audio:focus, .jp-video:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style:none;
    /*IE*/
}
.jp-ball {
    position: absolute;
z-index: 999;
    border-radius: 30px;
    top: 3px;
    left: 0;
    width: 1em;
    height: 1em;
    margin: -0.2em 0px 0px -0.5em;
    width: 14px;
    height: 14px;
  
    width: 0.9333em;
    height: 0.9333em;
    margin: -0.175em 0px 0px -0.466em;
    background-color: #fff;
    padding: 0px;
    /* z-index: 1; */
    -webkit-transition: -webkit-transform 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out;
}

JavaScript

$(document).ready(function () {

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "Bubble",
                mp3: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
            });
        },
        timeupdate: function(event) {
			$("#jp_container_1 .jp-ball").css("left",event.jPlayer.status.currentPercentAbsolute + "%");
		},
        swfPath: "https://rawgit.com/happyworm/jPlayer/tree/master/dist/jplayer",
        supplied: "mp3",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
    });


    /* Modern Seeking */

    var timeDrag = false; /* Drag status */
    $('.jp-play-bar').mousedown(function (e) {
        timeDrag = true;
        updatebar(e.pageX);
    });
    $(document).mouseup(function (e) {
        if (timeDrag) {
            timeDrag = false;
            updatebar(e.pageX);
        }
    });
    $(document).mousemove(function (e) {
        if (timeDrag) {
            updatebar(e.pageX);
        }
    });

    //update Progress Bar control
    var updatebar = function (x) {

        var progress = $('.jp-progress');
        var maxduration = $("#jquery_jplayer_1").jPlayer.duration; //audio duration
        console.log(maxduration);
        var position = x - progress.offset().left; //Click pos
        var percentage = 100 * position / progress.width();

        //Check within range
        if (percentage > 100) {
            percentage = 100;
        }
        if (percentage < 0) {
            percentage = 0;
        }

        $("#jquery_jplayer_1").jPlayer("playHead", percentage);

        //Update progress bar and video currenttime
        $('.jp-ball').css('left', percentage+'%');
        $('.jp-play-bar').css('width', percentage + '%');
        $("#jquery_jplayer_1").jPlayer.currentTime = maxduration * percentage /...