Put a slider bar in a canvas for control the volume

Question

I am trying to add a slide bar (like this http://demos.jquerymobile.com/1.3.0/docs/widgets/sliders/) in a canvas to control the volume of the sound using SoundJS .

I tried to search on google some information about a slidebar in a canvas but there is nothing

Here i just need some informations and a way to go for control the sound of my game and not only mute or unmute it .

Answer 1

You cannot put any DOM elements inside a canvas. Canvas is just a bitmap and any tags inside the canvas tag will be ignored by browsers which support canvas.

You can however wrap the canvas and an input control inside for example a div element this way:

<div class="wrapper">
    <canvas width=800 height=600 id="myCanvas" ></canvas>
    <input id="volume" type=range min=0 max=100 value=50 >
</div>

Then use CSS to place the slider on top of the canvas.

.wrapper {
    position:relative;
    }
.wrapper > canvas,
.wrapper > input {
    position:absolute;
    left:0;
    top:0;
    }
.wrapper > input {
    right:10px;    /* places the slider */
    top:10px;
    }

Then set the audio element's volume:

audio.volume = volume.value * 0.01;

The other way is to implement all the logic yourselves for a slider if you need it to be a part of canvas itself for styling or other reasons. A DOM element on top of canvas can slow down the performance of canvas so this can be an essential factor in some cases where performance is critical.

For this you need to declare a virtual region for the slider on your canvas and register mouse events up, down and move on the canvas element.

Draw a knob by converting its current value into a position within its region, that when mouse is clicked in this region you move the knob around inside that region and convert its position to a normalized value which you then use for volume.

This is a whole little project on its own, but the simplest way is to place an input element on top of the canvas.

Answer 2

Could you use a input range?

<input style="float: left; padding: 3px; margin-right: 3px;" id="fontSlider" type="range" name="points" value="15" min="1" max="100" step="1"/>
<input type="text" value="" id="value"/>

Then get the value from the textbox or just the value from the range...

  $(document).ready(function () {
  var Values = $( "#fontSlider" ).val();
  $("#value").val(Values);   
        $("#fontSlider").change(        
            function () {
            var Values = $( "#fontSlider" ).val();
                $("#value").val(Values);
            }            
        );
    });

DEMO

http://jsfiddle.net/bowenac/zMn5N/1/

Answer 3

You can use KineticJS for that. http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-shapes-horizontally-or-vertically-tutorial/

However, is there any reason why you can't use a slider bar, as in <input type="range" name="Volume" min="1" max="11"> to do that?

Answer 4

We use jquery sliders in the SoundJS Test Suite demo which you can check out in the github repo. Hope that helps.