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

 

 

TSW Web Audio Primer – Part 1

Introduction

This series will demonstrate how to use your web browser to make music! Thanks to the Web Audio API, modern web browsers have the ability to become a synthesizer. With the Javascript library Theresa’s Sound World (TSW) created by Stuart Memo, we can easily use the Web Audio API. Let’s get started!

Part 1 – What makes a sound?

The Web Audio API uses basic elements to create sounds – oscillators and filters. These are much like the early analog synthesizers. On these instruments, knobs and switches would be used to set up the oscillators and filters. In addition, patch cords would be used to connect the oscillators in different ways to make new sounds. We will start with using a single oscillator.

TSW provides an oscillator method which you can use to create a new oscillator node as follows:

var osc = tsw.oscillator (frequency, wave_type)

The frequency represents the frequency of the pitch to be played. The wave type is a text string and can be one of four values (‘sine’, ‘square’, triangle’, ‘sawtooth’). If no parameters are entered, the default is a 400 Hz sine wave oscillator. Here are some examples:

var osc = tsw.oscillator (600, 'sawtooth'); // Creates a 600 Hz sawtooth wave

var osc = tsw.oscillator (800, 'sine'); // Creates a 800 Hz sine wave

var osc = tsw.oscillator (1200, 'square'); // Creates a 1200 Hz square wave

var osc = tsw.oscillator (550, 'triangle'); // Creates a 550 Hz triangle wave

A table of pitch to frequency mappings can be found at http://peabody.sapp.org/class/st2/lab/notehz/.

We can change the volume of the tone we will create by using a gain node:

var volume;

volume = tsw.gain(0.25); // Set volume to 0.25 of normal

Once the oscillator node is created, the node needs to be connected to the final output node, called “speakers”. This is done using the connect method as follows:

tsw.connect (osc, tsw.speakers);

Finally, the note is started by calling the start method of the oscillator node object:

osc.start();

To stop the note, call the stop method for the oscillator:

osc.stop();

 

Let’s put this data and two functions (turn_on and turn_off) together in a file which can then be loaded from a web page (save as pitch.js):

var osc;

var volume;

&nbsp;

volume = tsw.gain(0.5);

&nbsp;

function turn_on() {

osc = tsw.oscillator (600, 'sawtooth');

tsw.connect(osc, volume, tsw.speakers);

osc.start();

};

&nbsp;

function turn_off() {

osc.stop();

};

Note that the oscillator is defined in the function turn_on instead of when the parameter osc is declared. There is a reason for setting up the oscillator this way. In the Web Audio API, once an oscillator is turned off or disconnected, it can no longer be used. If the oscillator was defined when the parameter osc was declared, it could not be started again if the user turns the oscillator on and off. With this design, a new oscillator instance will be created each time that the turn_on function is called.

Now we will use the Bootstrap user interface toolkit to create our application. We will use the starter-template file from the Bootstrap examples site. In the <head> element, make the following changes:

FROM:

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

TO:

<!-- Bootstrap core CSS -->

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

<script src="tsw.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="pitch.js"></script>

Remove the following HTML from the <head> element:

<link rel="icon" href="../../favicon.ico">

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Now replace the HTML within the <body> element in the div with with the following HTML to set up the buttons to call the two functions in pitch.js:

FROM:

<div>

<div>
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>

</div><!-- /.container -->

TO:

<div>

<div>
<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>
</div>

</div><!-- /.container -->

Finally, replace the links at the bottom of index.html with the following:

 

FROM:

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>

TO:

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Load up the HTML file index.html in your browser (the file does not have to be uploaded to a web server). You should see the following:

ex01_01

Click on the Play button, and you should hear the pitch. To turn off the pitch, click the Stop button.

You did it! You are making sounds in your browser using the Web Audio API. If you do not hear anything, check the HTML5Test  website to see if your browser supports the Web Audio API. You can also go to the demo of this application and see if you can use that to hear the pitch.

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

 

Notes on a River4 initial installation

I have finished installing the River4 application by Dave Winer. My river is running at http://myrivers.andysylvester.com/. I plan to document my experiences on my weblog, and possibly using the Fargo tool (also by Dave Winer). However, I wanted to highlight several problem areas for a person approaching River4 for the first time and approaching the infrastructure used by River 4 for the first time (Heroku, S3 from Amazon Web Services). For background, I have worked in software development for over 25 years, so I did bring a little experience to the table.

Heroku

Part of setting up a Heroku account involves supplying a SSH ID file. When I started, Heroku asked me if I wanted to use a file associated with my Github account, or another file (id_rsa.pub). Since I had been working with Github, I selected that file. After a lot of struggles in making my initial Git commit on Heroku, I figured out that I needed to delete the Github key and upload the id_rsa.pub key. Once I did that, I was able to make the commit and create the Node.js application. This was my first big problem to overcome. I don’t remember how I had created my SSH key, but that is another area where some additional information would be good for new users.

S3 Problem Areas

I am an Amazon user, so signing up for Amazon Web Services was not a problem. However, the setting up of a bucket on S3 was not as straightforward. After reading through the River4 README document and Christian Dadwell’s River4 tutorial, I felt that I needed some more information. I found several pages in the AWS documentation that guided me through the bucket creation process (for example, http://docs.aws.amazon.com/AmazonS3/latest/dev/UsingBucket.html and http://docs.aws.amazon.com/AmazonS3/latest/UG/CreatingaBucket.html). Due to my initial choices in the setup, I caused some problems for myself. When initially setting up the region for the bucket, I chose Oregon because that is where I live. After working through some errors, I believe that “US Standard” is the correct choice. When I went back to Christian Dadwell’s tutorial, I saw that he listed “US Default” in his S3 setup instructions. I found out the hard way that this was an important setting.

Another problem I encountered after correcting that issue was getting “Access Denied” messages in my Heroku logs. Another River4 user, Frank McPherson, mentioned that I might need to change my AWS user permission settings to a “Power User” setting to overcome the “Access Denied” issue. I did that, then ended up moving the setting all the way to the “Administrator” setting. With that change, I was able to see the River4 app start working and displaying some rivers. I think that there should be some other way to facilitate changing of permissions (maybe through a S3 bucket policy change), but this at least got my River4 install running. I greatly appreciate Frank McPherson’s help in this area.

Conclusion

I hope this helps other “new users” for River4. I have enjoyed reading Dave Winer’s rivers linked from Scripting News, and look forward to setting up my own rivers.