For some unknown reason, I managed to get stuck on a tutorial from our second day. The tutorial was dealing with timing of an oscillator events. I wrote the melody notes of John Coltrane’s tune ‘Giant Steps’ with this frequency to midi note converter.
Later on, I have tried to develop this into a player that will play the same melody with an option to choose the waveform (Sine, Sawtooth, Triangle and Square). I wanted to add a pre-recorded percussion soundwave that would sync with the melody of each oscillator. And of course, the last but not least, a functioning stop button that would let me stop this mad experiment.
This is a short description of the code. A much more detailed description can be viewed within the code itself which is available at my Github repo. I added the Tone.js to my source code and created the buttons in the body of the page. Later, I have added a CSS file to set the style of my document. I Added the variables for context, Audio buffering for the audio file, 4 oscillators and 4 players. In the stop button function I’ve used an if statement to ensure the stop of all oscillators playing at any time. Setting the initialization of the audio context to include the buffer initialization, decoding the audio data and initializing the player was not an easy task but thanks to friends, teachers and students I managed to do so. Next came the actual melody set awkwardly with parameters for frequency value (instead of note names) and time value in seconds (instead of using a transport time). This meant that the player plays the melody in 120 bpm. Four Oscillator buttons were then created with the functionality of initializing the player and oscillator together.
What I’ve Learned
Besides the fact that almost everything was new to me, the most important points that will continue with me are:
- It is extremely important to plan your design before jumping into implementation mode. Sketching it out on a piece of paper is a helpful way.
- Learn how to find your mistakes in the code, use the console.
- Don’t be afraid to (miserably) fail, it’s part of the process.
- Keep your friend close but your programmer friends even closer.
During the week I was introduced to many great sites, tutorials and videos which really helped me understand the potential of Web Audio and the implementation of objects within my code. Using the web-browser’s view source option is another helpful tool for figuring out the coding behind many of the available examples online.
Work in Progress
Now that my giant player is working properly I can continue experimenting with applying filters, a fancier UI with NexusUI.js, learning how to use notes instead of frequencies, change the way I handle the timing and scheduling of the melody and add a change tempo slider. The Giant Step player in itself is a non-interesting piece of code in my opinion, and I would have loved to invest more time in creating a more interactive system with a much more interesting result. I am happy that I got introduced to the Tone.js library because I could utilize this library together with several Max/MSP patches I am currently working on.