sound control

[techyworld]

hi i have a sound control on my website, i need to put a condition to check, when the xcoordinate is increasing, the sound volume increase and if xcoordinate is decreasing, sound volume decrease. I'm having trouble to set this condition, i dont know how to put this. Can you help me?

[Taywin]

If you are talking about using pure JavaScript to control audio level, I doublt it can because the language is not a audio player...

[techyworld]

I am using Ocanvas library and Buzz library. using ocanvas, i can capture the x coordinate, and with buzz i can increase the sound. i just need a condition if (x increasing) increase volume and vice versa

[Taywin]

If you could obtain the value, then you may need a local variable and store the current captured value. Whenever the value is changed, compared the new value with the current value and deal with it. Then, update the current value to the changed value. If you still do not understand, please provide the script where you obtain the value and where the value changing event occur.

[techyworld]

 var soundcontrol;
            window.onload=function()
            {
                drawcanvas();
                draw();
                soundcontrol = new mysound();
                soundcontrol.playmenusound();
                volume();

            } 

            function drawcanvas()
            {//code to draw canvas}

            function draw()
            {
                //codes to draw line
                //codes to draw ellipse on line 
                //append both line and ellipse on canvas

                //the following are codes to drag the ellipse back and forward along the line   
                ellipse.dragAndDrop({
                    move: function ()
                    {
                        //capture the x coordinate an validate motion

                        curX= canvas.mouse.x;

                        if(curX<0)
                        {
                            this.moveTo(0,10);
                        }//lower bound
                        else if(curX>50)
                        {
                            this.moveTo(50,10);
                        }//upper bound
                        else
                        {
                            this.moveTo(canvas.mouse.x,10);

                        } },    

                    end: function () 
                    {
                        if(curX<32)
                        {
                            this.moveTo(0,10);

                        }
                        else if(curX>200)
                        {
                            this.moveTo(50,10);

                        }
                        else
                        {
                            this.moveTo(curX,10);
                            //I think i should place the condition here. but how? 

                        }}});}}

        function mysound()
        {
            this.sound="";
            this.playmenusound=function()
            {
                sound= new buzz.sound("mysong.mp3");
                sound.play();   
            }   
        }

I am using ocanvas and buzz library(for sound). So to increase/decrease the sound , ijust need to use this .increaseVolume() and .decreaseVolume(). canvas.mouse.x = capturing the x position of th emouse pointer. So where should i place the condition and how? I'm confused.

[Taywin]

It's going to be inside }} at line 41. Also, you need to have a currentVolume declared somewhere outside to be used as global for the function. A question I would ask is that can you specify the value of increase/decrease volume? If so, assume the value range from 0 as 0% and 50 as 100% of volume. The percentage of the volume would be computed as VOLUMN_PERCENTAGE = curX*2;. In order to do so, you need to update certain things...

var currentVolume = 50;  // default is max?
...
curX= canvas.mouse.x;

if(curX<0)
{
    this.moveTo(0,10);
    curX = 0;
}//lower bound
else if(curX>50)
{
    this.moveTo(50,10);
    curX = 50;
}//upper bound
else
{
    this.moveTo(canvas.mouse.x,10);

}
// if there is no way to set a step value, then below is what it is...
if (curX>currentVolume) { increaseVolume(); }
else if (curX<currentVolume) { decreaseVolume(); }
// otherwise, you could compute the value...
// my assumption is that there is a setVolume(VALUE) function
// setVolume(curX*2);
currentVolume = curX;
},    

[techyworld]

yes i can use .setVolume()

[techyworld]

I did not understand the following
// otherwise, you could compute the value...
// my assumption is that there is a setVolume(VALUE) function
// setVolume(curX*2);
currentVolume = curX;

[Taywin]

It means that if you don't use the if-else statement, you could simply use setVolume() to the value the curX is selected instead. However, the currentVolume must still be set to curX after the move() function is called.

[techyworld]

ok thanks