Using Knob.js as the volume controller for JPlayer

Question

Using Knob.js as the volume controller for JPlayer

The bind function isn't working..I got it from an example where a person used data slider to pull off the volume controller. But this isn't working in case of Knob....can anyone help???

I think the 'slider: ready slider:change' part has to be something else but I can't figure out what to put there....

JPlayer JQuery

<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
   //<![CDATA[
  $(document).ready(function(){
                var stream = {
                    title: "ABC",
                    mp3: "http://www.xyz.com:8000/stream"
                },
                ready = false;
                $("#jquery_jplayer_1").jPlayer({
                    ready: function (event) {
                        ready = true;
                        $(this).jPlayer("setMedia", stream);
                    },
                    pause: function() {
                        $(this).jPlayer("clearMedia");
                    },
                    error: function(event) {
                        if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                            // Setup the media stream again and play it.
                            $(this).jPlayer("setMedia", stream).jPlayer("play");
                        }
                    },
                    swfPath: "js",
                    supplied: "mp3",
                    preload: "none",
                    wmode: "window",
                    volume: 1,
                    muted: false,
                    keyEnabled: true
                });

                $(".knob")
                                .bind("slider:ready slider:changed", 
                                    function (event, data) {
                                        $("#jquery_jplayer_1").jPlayer( "volume", data.value.toFixed(3));
            });
            //]]>
            </script>

KNOB JQUERY

 <!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
        <script src="js/jquery.knob.js"></script>
        <script>
            $(function($) {
                $(".knob").knob({
                    change : function (value) {
                        //console.log("change : " + value);
                    },
                    release : function (value) {
                        //console.log(this.$.attr('value'));
                        console.log("release : " + value);
                    },
                    cancel : function () {
                        console.log("cancel : ", this);
                    },
                    /*format : function (value) {
                        return value + '%';
                    },*/
                    draw : function () {
                        // "tron" case
                        if(this.$.data('skin') == 'tron') {
                            this.cursorExt = 0.3;
                            var a = this.arc(this.cv)  // Arc
                                , pa                   // Previous arc
                                , r = 1;

                            this.g.lineWidth = this.lineWidth;

                            if (this.o.displayPrevious) {
                                pa = this.arc(this.v);
                                this.g.beginPath();
                                this.g.strokeStyle = this.pColor;
                                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                                this.g.stroke();
                            }

                            this.g.beginPath();
                            this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                            this.g.stroke();

                            this.g.lineWidth = 2;
                            this.g.beginPath();
                            this.g.strokeStyle = this.o.fgColor;
                            this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                            this.g.stroke();

                            return false;
                        }
                    }
                });
            });
        </script>

THE HTML

 <div id="content_main">
    <div id="jquery_jplayer_1" class="jp-jplayer" ><img id="jp_poster_0" style="display: none;"><audio id="jp_audio_0" preload="none" src="about:blank" __idm_id__="16224257"></audio></div>

    <div id="jp_container_1" class="jp-audio-stream">
        <div class="jp-type-single">
            <div class="jp-gui jp-interface">
                <ul class="jp-controls">
                    <li><a href="javascript:;" class="jp-play" tabindex="1" style="display: block;"><div id="triangle" title="Play" rel="tooltip"></div></a></li>
                    <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: none;"></a></li>

                </ul>
                 <input class="knob" data-min="10"  data-max="100" data-step="5" data-displayInput="false"  value="70">
            </div>

            <div class="jp-no-solution" style="display: none;">
                <span>Update Required</span>
                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>
        </div>
    </div>
</div>

Answer 1

The slider code is useless to you so remove:

$(".knob").bind("slider:ready slider:changed", 
                function (event, data) {
                   $("#jquery_jplayer_1").jPlayer( "volume", data.value.toFixed(3));
            });

Knob provides some "hooks" to use. Which on you use is up to you. Use Change if you want the volume to change as the knob is rotated or use release to change the volume after the user has finished moving the knob. This is found in the knob set up:

$(function($) {
     $(".knob").knob({
          change : function (value) {
               /*Use this hook to change the volume as the knob is used*/
               //console.log("change : " + value);
          },
          release : function (value) {
               /*Use this hook to change the volume 
                 once user has finished playing with the knob*/
                 //console.log(this.$.attr('value'));
                 console.log("release : " + value);
          },
         cancel : function () {
                 console.log("cancel : ", this);
         },
         .....  
         /* Remaining code removed for brevity.

Remember if all else fails... read the docs... don't just blindly follow someone elses example.