Waveformer: From free web app to a commissioned tool

Waveformer is a web tool that lets you visualize your audio in vector waveforms. The need for this tool arose in 2015 when I was designing an interface where I needed to display audio files graphically. Searching for a tool online that met my needs didn't gave me any results. Since I was dabbling around with generative design / creative coding I decided to create my own tool and published it to the internet for others to enjoy. A few years later I got asked to build a custom design tool for an art project.

Creating Waveformer

Waveformer is build with p5.js and its sound library. Normally I would use p5.js for my generative art projects but it is also a good use for creating custom design tools. To produce svg’s I implemented the p5.js-svg library by Zeno Zeng. A user can pick an audio file (locally) and the website will draw a vector waveform when playing the audio track. During playback the user can alter the level of detail of the waveform and in the end export it to a .png or .svg format.

Waveformer - Visualizing your audio in vector waveforms

Getting it out there

To get my project out there I decided to post it on Product Hunt. Product Hunt is a place where new products are posted every day. After publishing Waveformer to Product Hunt it got a lot of upvotes and it was even featured in daily and weekly mails. A lot of people got to know about Waveformer. This gave this project a lot of traffic in the first few weeks. I was happy that this free web app was useful to other people.

Waveformer on Product Hunt

Following years

In the following years I almost forgot about the tool until I got an email that it wasn’t working anymore and if I could roll out a fix. Apparantly somebody still used the tool. I took a look at the analytics and it seemed that the tool was still being used by people regularly.

Over time I got tweets/mails from people who thanked me or asked if I was still working on it and could add new features. Not much has changed however. I did add one small thing, I added a number to the amount of detail slider so a student could use the tool for her dissertation project.

Commission

In the fall of 2019 I got a commission by Alex Szabo Haslam, a designer and artist, to build a custom tool to help him with his ongoing art project Waveform. Alex wanted the tool to do three things to speed up his production process, which involves a lot of hand-rendered elements:

• A waveform that consists of a particular number of bars, which he could edit depending on printed dimensions
• An .svg export which allowed for edits and control
• Create a waveform without playing the audio (to save on time)

Waveform — customised one-of-a-kind music prints (by Alex Szabo Haslam)

I really liked Alex’ project and was excited that my tool could possibly be a part of it. This tool would help Alex with the production of 100+ Waveform posters. Therefore I proposed to create a design tool that ran locally. Instead of using p5.js I used Processing Java, my go-to programming language for making my generative art. Processing Java has a neat feature to export your project to a Mac or Windows application. No need for users to install Processing and run the program from a code editor. I used the Minim library to read the audio data and with the ControlP5 library I created a simple user interface so Alex’ could choose audio files, change parameters and export it to a vector .pdf.

Waveformer, the commissioned tool, run locally on MacOS

Alex Szabo Haslam: Misha's tool has been a big help for my soundwave work. While my practice is often a mix of technology and traditional handmade methods, the process I had used for many years was long, laborious, and made file management a big problem as there were so many different software packages I'd have to use before I could arrive at the part that involved hand-rendered work. This was fine for one-off and short-run pieces, but when faced with an unexpectedly large bespoke order I knew I had to automate part of the process. Misha's brief was to provide editable/customised components that still allowed me to make adjustments for handmade production processes. I still do a lot by hand — it's the way I prefer to work and gives me a lot of control over the output — but Misha's custom tool has reduced my reliance on other software and dramatically improved my workflow.

Closing thoughts

I never thought that publishing the Waveformer web tool would result in working on a commissioned design tool a few years later. My take away from this is that you should get your work out there. Sometimes it will take a couple of years before new opportunities arise but it can and will happen.

Thank you Alex for the opportunity!

If you have any questions or remarks or an idea for a custom design tool please let me know via e-mail or via DM ;)