Controlling audio with jQuery UI and jPlayer

Question

I'm using the jPlayer plugin along with jQuery UI's slider widget. Everything seems to be setup but I seem to be experiencing some trouble when it comes to dragging the volume up and down. Dragging either way makes the volume jump too far up/down. The functionality is controlled through the slide property, I'm just not sure how to get it to drag accordingly.

JSFiddle

Answer 1

Problem :

Since you have position: absolute for jp-volume-bar-knob, the ui-slider-horizontal bar lost its width (the horizontal bar over which the slider slides).

Option 1:

Instead of applying slider to jp-volume-bar-knob try applying it to jp-volume-bar it seems to be working fine then.

Here is the updated demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/2/

However, the initial volume level and initial slider value have to be set.

---

Option 2:

You can set the following css and still apply slider to jp-volume-bar-knob

.ui-slider-horizontal{
    height: 0;
    border: transparent;
    width: 100%;
}

Here is the demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/3/

---

Update

Try something like this

• In this the volume bar works fine.
• Default value is replicated on the slider.

---

$(document).ready(function () {

    var myPlayer = $("#jquery_jplayer_1"),
        options = {
            ready: function (event) {
                if (event.jPlayer.status.noVolume) {
                    // if there is no volume add custom styling
                }
                // Setup the player with media.
                $(this).jPlayer("setMedia", {
                    title: "Bubble",
                    m4a: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
                    oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
                });
            },
            volumechange: function (event) {
                if (event.jPlayer.options.muted) {
                    myControl.volume.slider("value", 0);
                } else {
                    myControl.volume.slider("value", event.jPlayer.options.volume);
                }
            },
            swfPath: "http://jplayer.org/latest/dist/jplayer",
            supplied: "mp3, oga",
            wmode: "window",
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true,
            remainingDuration: true,
            toggleDuration: true
        },
        myControl = {
            volume: $(".jp-volume-bar-knob")
        };

    // Instance jPlayer
    myPlayer.jPlayer(options);

    myControl.volume.slider({
        animate: "fast",
        max: 1,
        range: "min",
        step: 0.01,
        value: $.jPlayer.prototype.options.volume,
        slide: function (event, ui) {
            myPlayer.jPlayer("option", "muted", false);
            myPlayer.jPlayer("option", "volume", ui.value);
        }
    });
});

I adopted this from jplayer demo and modified a bit based on the question.

Here is the updated demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/6/

---

update 2

Change the volume bar markup to something like this

<div class="jp-volume-bar"></div>

Instead of changing all the .jp-*'s css, change jquery-ui's css to something like this

.ui-slider-horizontal{
    background: #444;
    cursor: pointer;
    display: inline-block;
    position: relative;
    height: 4px;
    width: 100px;
}
.ui-slider-range{
    background: #cc181e;
}

Here is the demo http://jsfiddle.net/dhirajbodicherla/9co0ac65/10/