#webaudioapi

I’ve finally released my game Dog Castle on Itch.io https://madcoretom.itch.io/dog-castle

I added some new music to my game Dog Castle. It’s made using the #WebAudioAPI so there are no audio files at all, just code controlling sine, saw, and random noise waves.

I started implementing sound effects for jumping and the menu using the Web Audio API!

The effects are just saw or square waves, with linearly ramping frequencies and gains. I’ll add some more functionality later. It’s feels good to finally have sound, and still doing it the “vanilla” way, like I love to do!

So excited to share the capstone project created alongside my amazing teammates Emily Intersimone & Mariya Bogorodova!

We built a web app called Symph that lets you create new musical ideas and share w/ friends. Our goal was to make music composition fun & accessible. Also, we really wanted to play with synthesizing music in the browser. Hope you’ll check it out and let me know what you think! We’re deployed at getsymph.io

You can also take a look at our source code on Github.

We built the app using the MEAN stack - MongoDB/Mongoose, Express, Angular & Node.

In addition, some of the key technologies & libraries we used included:

ToneJS - used throughout our app, this library provided us an abstraction over the Web Audio API, which let us schedule our music in a timeline of notes (instead of dealing with oscillators, frequencies & filters directly through Web Audio API). We scheduled our music using callbacks added to the Tone.Transport object. Our challenge was the make sure there wasn’t latency on playback when we added animations, or when trying to save the notes in a format we could send to the DB.

FabricJS - used on our Loop Editor to create the grid on which you can add notes. This library provided an abstraction over the HTML5 Canvas API. We created a canvas object, and drew a grid on it - FabricJS helped us add the functionality that lets you click, drag, extend, delete notes on that grid. Biggest challenge was making sure we had a way to not only save musical info about notes added to the grid, but also draw notes for an existing loop on load.

HTML Drag and Drop API - we created custom Angular directives to handle the drag and drop functionality on the Mix Editor page. This page lets you drag and drop loops into Tracks to make mixes. Things we had to consider included: copying loops dragged from the Loop Bucket, actually moving around loops that are dragged from within the Tracks, and adding a Delete button. We had to deal with ensuring there weren’t duplicate HTML IDs, and also making sure that when you drop a loop div into the Track, it actually adds that loop’s musical data to the timeline.

Overall, building Symph was an amazing experience - in no small part due to the amazing Mariya & Emily who I was lucky to be able to work with! We’re continuing to add to the application even now, including things like new instruments, sampled instruments (piano sounds!!), etc. As of late, I’ve been working on creating tests for the routes & models, to make it easier to continue developing the app.