in Web Audio API

TSW Web Audio Primer – Part 2

In part 1 of this series, we played a pitch using the Web Audio API. Let us set up a way to change the pitch of the note. Add this logic to index.html from Part 1 to add a slider element:

FROM:

<div class="starter-template">
<p>Press Play to hear how the pitch sounds. <button onclick="turn_on();">Play</button></p>
<p>Press Stop to turn it off. <button onclick="turn_off();">Stop</button></p>
<center><p><input id="slider" type="range" min="0" max="1000" value="600" onchange="changePitch(this.value)"></p></center>
</div>

TO:

<div class="starter-template">
<p>Press Play to hear how the pitch sounds. <button onclick="turn_on();">Play</button></p>
<p>Press Stop to turn it off. <button onclick="turn_off();">Stop</button></p>
<center><p><input id="slider" type="range" min="0" max="1000" value="600" onchange="changePitch(this.value)"></p></center>
</div>

Next, create a file (slider.css) and add the following CSS logic to adjust the size of the slider:

.slider-width200

{

width: 200px !important;

}

The “!important” text is needed to override some default Bootstrap CSS logic.

Finally, in pitch.js, add the following function to be called when the position of the slider changes:

function changePitch(newValue)

{

osc.frequency(newValue);

};

When you have completed those changes, load index.html to see the following:

ex02_01

Click on the Play button, and you should hear the original pitch. Now move the slider to the right. When you release the slider, you should hear the pitch go up. If you move the slider to the left, the pitch will go down.

You can also go to the demo of this application and see if you can change the pitch.

Download the source code for all of the examples in this series from Github.

References:

WebTUTSDepot: Tutorial for HTML5 sliders

StackOverflow: How to Overwrite Styling In Twitter Bootstrap

 

 

Write a Comment

Comment