1

Actively listen and Combining the jqueryui-slider with the jplayer voulme in a value varible? Also display the volume value in a another div? is there a way to grab the value of the jqueryui slider val and apply it to the jplayer vaolume's value? html markup:

<ul class="toolbar ui-widget-header ui-corner-all">
                <li><button class="jp-play" href="#">Play</button></li>
                <li><button class="jp-pause" href="#">Pause</button></li>
                <li><button class="jp-stop" href="#">Stop</button></li>
                <li><button class="jp-mute" href="#">Mute</button></li>
                <li><button class="jp-unmute" href="#">Unmute</button></li>
                <li><div class="jp-volume-bar"></div></li>
            </ul>
            <ul>


            </ul>

jquery:

my_jPlayer.jPlayer({
        ready: function () {
            $("#jp_container .track-default").click();
        },
        timeupdate: function(event) {
            my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
        },
        play: function(event) {
            my_playState.text(opt_text_playing);
        },
        pause: function(event) {
            my_playState.text(opt_text_selected);
        },
        ended: function(event) {
            my_playState.text(opt_text_selected);
        },
        swfPath: "js",
        cssSelectorAncestor: "#jp_container",
        supplied: "mp3",
        wmode: "window",
        volumeBarValue: volVal
    });
$(".jp-volume-bar").slider({
            value: 100,
            orientation: "horizontal",
            range: "min",
            animate: true
    });
    var volVal = $(".jp-volume-bar").slider("value");
Youngnate DaGreat
  • 322
  • 6
  • 22

2 Answers2

4

This is really very easy with the latest jplayer (Version: 2.1.0):

$('#sliderVolume').slider({
    value : 50,
    max: 100,
    range: 'min',
    animate: true,
    orientation: "vertical",

    slide: function(event, ui) {
        var volume = ui.value / 100;
        $("#jquery_jplayer").jPlayer("volume", volume);
    }
});
Billy
  • 788
  • 1
  • 8
  • 17
0

This should be achievable using eventing. Look into jQuery event binding and event triggering if you are new to this concept.

Once you know how to do eventing, look at the jQuery slider's slide event. http://docs.jquery.com/UI/Slider#event-slide.

You just have to update the jPlayer's volume and change the value inside the div that you want the volume

ShaggyInjun
  • 2,880
  • 2
  • 31
  • 52