Time for action – adding a volume control
Going back into the HTML, let's add a range input control to allow the user to change the volume. We will put it right under the sustain label and control we just added:
<label for="volume">Volume: </label> <input type="range" id="volume" min="1" max="100" value="100" step="1" />
We define a label and a range input with an id
attribute of volume
. We set the range of the control from 1
to 100
with a step
value of 1
. We also default the value to 100
.
Back in our PianoApp
object we add another global variable named volume
and set it to 1.0
, the maximum volume, by default:
function PianoApp() { var version = "6.3", // Code not shown... sustain = true, volume = 1.0;
Like the sustain
checkbox, we need to add a
Get HTML5 Web Application Development By Example Beginner's guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.