Mooderize

Built in 2020

HTML CSS JavaScript Web Audio API Node.js PWA

TL ; DR

Mooderize is a single page app which allows you to apply sound effects to an audio file. The audio is processed by the Web Audio API. The website also contains a feature allowing users to asynchronously load a YouTube video. For this feature, I made a small API using Express.js.

mooderize screenshot mooderize screenshot mooderize screenshot mooderize screenshot mooderize screenshot

Goal

I wanted to find a way to process audio on a website. I wanted the user to be able to upload a song, choose a pre-maid audio effect, apply it to the song and then download the modified song. I also wanted the website to be a PWA.

Problems & Solutions

My main problem was to find a library who offered, at least, basic EQ and reverb effects. I found out that there are only few reliable options. I tried Python PYO, which was a bit too complicated, I also tried python-audio-effects, but I honestly don't remember why I didn't use it. But my final choice went to the JavaScript Web Audio API. This solution has the particularity of being full frontend.

The second problem, which was linked to the first one, was that the Web Audio API doesn't provide the possibility to create a file from the modified song. You can stream the song only. The only solution I found is to use the Recorderjs library. It's unfortunately not maintained anymore, but I know that a lot of websites are using it and it's a small module so I went with it.

The third problem was to use a YouTube link as an audio source. YouTube is not helpful on this, as you can't use the audio from an embed YouTube video. I didn't find any online API to retrieve an audio file from a YouTube link, but I found multiple python and Node modules on GitHub and went for the node-ytdl module. I then built a very simple API using Express.js, just to retrieve the audio file using an ajax call.

Room for improvement

I think that using a backend library for the audio processing could be a good idea. Because the audio processing is very slow on mobile using Web Audio API. The UI and the visual aspect could be improved a lot. Also, I wanted to try to build the entire app using vanilla JavaScript to know if jQuery was still necessary in 2020. And according to me, it is. And more than that, a library like Redux would certainly help a lot to handle the navigation, which is a bit chaotic in JS. This app was kind of an experiment, so the overall code is not very clean.