Assign jPlayer volume to custom button

Question

I have a modified player in my page which uses jPlayer and i want to bind a custom wheel button to the volume function:

The player page

$musicPlayer.jPlayer({
                            swfPath: "js/jplayer/",
                            solution: 'flash,html',
                            supplied: 'm4a, oga, mp3',
                            preload: 'metadata',
                            volume: 0.8,
                            muted: false,
                            cssSelectorAncestor: "#jp_container_N",
                            cssSelector: {
                                play: '.jp-play',
                                pause: '.jp-pause',
                                seekBar: '.jp-seek-bar',
                                playBar: '.jp-play-bar',
                            },
                            errorAlerts: false,
                            warningAlerts: false,
                            ready: function () {
                              $(this).jPlayer("setMedia", {
                                mp3: $first_song,
                                solution: 'flash, html',
                              });
                            },
                        }).bind($.jPlayer.event.ended, function(event){
                            var $o = $('.selected').next('li'),$json = $.parseJSON($o.find('img').attr('data-src'));
                            if(!$o.is(':last')){
                                playSong($o,$json);
                            }
                        });

                });

The custom volume wheel:

//js code for the metal style wheel - below

        $('#metal .indicator-cw').bind('touchmove', function(event){
            updateMetal();
        });
        $("#metal .indicator-cw").mousemove(updateMetal);

        function updateMetal(){
    var number = $("#metal .result-cw").text();
    var Degrees = parseInt(number);

    $("#rotateit").css({'transform':'rotate(' + (Degrees) + 'deg)', '-webkit-transform':'rotate(' + (Degrees) + 'deg)', '-o-transform':'rotate(' + (Degrees) + 'deg)', '-moz-transform':'rotate(' + (Degrees) + 'deg)', '-ms-transform':'rotate(' + (Degrees) + 'deg)' });

        }
        //js code for the metal style wheel - above

HTML:

<div id="metal">
        <div class="result-cw"></div>
        <div class="indicator-cw1"><img src="img/metal_indicator.png" id="rotateit" class="indicator-cw-img" /></div>
        <div class="indicator-cw"></div>
    </div>

How can i assign the jPlayer volume to that wheel button?

Answer 1

In the jPlayer documentation you can read that jPlayer's API has a function for volume handling.

All you have to do is translate the degrees of rotation to a number between 0 and 1. Since 360 degrees is the maximum value, all you have to do is to multiply the current degrees of rotation by (1/360) and pass that as a parameter to the volume method.

In your example, it would be something like:

var vol = parseInt($("#metal .result-cw").text()) * (1/360);    
$("#player").jPlayer("volume", vol);