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");
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