Learn creative coding writing simple programs
141. Processing.js with sound / audio (I)
This episode is special, as it is not about programming concepts in general, but about how to add sound to a processing.js program. You won't miss any important programming concepts if you skip it.
Part I.
Any libraries you import in the standard version of Processing are not available in Processing.js, so we need to think of another approach to play sound files.
What we will do is to use JavaScript to play sounds. JavaScript is a programming language that runs in the browser. In fact, Processing.js programs are automatically converted to JavaScript, but that's something invisible to us.
So Processing.js will take care of the graphics, and JavaScript will play sounds. We will have two programming languages, and we must find a way to communicate them.
After making sure Processing is running in the JavaScript mode, we can use a menu option to create a custom template. This will create a folder called template inside our sketch folder.
In that folder we will find an html file where we will write our JavaScript code to play sound. Also inside that folder we will drop the unzipped audio library, which we download from http://buzz.jaysalvat.com, and the audio files we want to play. I recommend saving the sounds both in .mp3 and in .ogg format, to make sure it plays in different browsers.
We will edit the file template.html using a text editor. One new line will instruct the web page to load the audio library. Other lines will make the sound files ready for use.
Before we learn how to communicate Processing with JavaScript, we will create two temporary HTML buttons to play the sounds, just to make sure things are working.
You have probably noticed that we are doing things a bit different this time. Normally all the code of our program is Processing code. In this case we have both Processing code and JavaScript code. It's weird, but it works :)
The files from this episode can be found at: https://github.com/hamoid/Fun-Programming/tree/master/processing/06/e141_pjs_audio
Note: in the Examples menu of Processing there are some processing.js programs that include audio, but they did not work on my computer.
Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)
To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
To highlight code blocks, surround it with ``` code-fences ``` like this:``` void setup() { size(600, 600); } ```