HTML5 Canvas Animation
Creating a native HTML5 processing animation to visualize advanced audio engineering
eMastered is an online audio mastering engine that's easy to use, fast, and sounds incredible - created by Grammy winning engineers. We helped them bring their back-end application to life by creating a HTML5 processing animation.
eMastered hired us to create a custom uploading and processing animation from their brand designs, that could convey each step of the processing pipeline (analyzing waveform, detecting features, modelling processors, and finally mastering). We opted to go with a HTML5 canvas animation, to provide the most compatibility with various browsers and devices, along with the most flexibility with animation. Back in the day this is something that would have been done using Adobe Flash, but that's a little old-school these days - and we needed something future-facing.
Through a bunch of trigonometry, and plenty of trial and error - we were able to create an entirely code-based animation for each step in the process. That's right, no images to load or assets to pull in, strictly code for everything in the animation - which meant faster load times, consistency of design, and seamless transitions between each stage of the animation - no matter how long each one took. Of course, this led to some absolutely crazy math to calculate and draw the waveform animations and circular designs - and some complex logic to smoothly animate all of the involved elements, but when complete the final product was a well packaged single JS file that could easily draw the animation wherever they needed it - and be customized along the way.
"It was a pleasure working with Simon at Marchant Web. He turned in the work a day earlier than expected. He is highly skilled and knowledgeable. I look forward to working with him on my next project.”
Co-Founder @ eMastered
Have a project in mind?
I'd be happy to chat, and see if we'd be a good fit...