These last two weeks, I've been playing with the JavaScript web audio api and Tone.JS api. As I've stated before I have a background in audio engineering and sound design, so the web audio api terminology is very familiar. I decided to make a soundboard app using the Tone.JS Library and the Nexus UI Javascript library.
The design/look of the app is based on the DJ Tech Tools Midi fighter Mixed with the Akai Mpc Renaissance.
The Webpage and the app were created using CSS grid. I'm trying to get used to NOT using bootstrap in my designs, and CSS grid is solid. The best part is that this app is touchscreen friendly. I didn't make it responsive, but you can zoom into the app and still use it the CSS is on point!
Since I'm new to writing Javascript apps, I've kept it very simple. I'm using audio wav samples instead of synthesized sounds. The buttons and the oscillograph (graphical waveform) are the Nexus UI api and all the sounds you hear are from Tone.JS.
As I said I was working on this project for more or less 2 weeks. I was stuck at two main points. First was the audio buffering in the web audio API, which is to load audio samples before they get played. Second was making the actual oscillograph(waveform) move.
As far as buffering audio, I didn't figure it out until my 2nd project (check my web flyer project on github). But I learned I can bypass buffering by just getting a link from an online cloud website. I've been using cloudinary to make that happen.
The part that really had me pulling my hair was actually connecting the audio api to the nexus ui (graphic) api. According to the nexus documentation (i'm about to speak javascript), all you had to do was take the visualliser and use a .connect() function to the audio variable thats holding the sound and it would work. Not that simple. It gave me the error that the two apis were not in the same context (or world).
I couldn't figure it out myself. So after a week and a half, went to Nexus UI's ui and created an issue form. Taylorbf on github contacted me and gave me a solution. All i had to do was link the Tone JS context to the Nexus UI context with an equals sign.
or: Tone.context = Nexus.context
(This is an Iphone screenshot)
That was It! I got my sounds to work with the graphic. Next I replaced my placeholder sounds with sounds that I designed and/or tweaked for my original music. Doneso! I do plan on expanding on this project, maybe add sound fx and a volume fader. I'm definitely looking into making everything recordable so you can save what you played on mp3.
If you'd like to play with my soundboard check out my github: https://github.com/nmwenz90/Nate-s-SoundBoard-Project
Not sure I'f ill put a domain name on it just yet.
Have Fun!
The Return of Chippy Album out now!
http://natekodi.com/project/the-return-of-chippy/
