2

In short, I have a site where on the client side the user has a "beat maker" app. The user can turn on / turn off noises, background beats, etc, to essentially create their own custom "song" based on the pre-defined noises, tones and tunes that I have on the client side.

I need to somehow translate the beat they're making (in HTML5 canvas) to my server-side (currently Node.JS) and spit out an MP3 of their creation.

Basically I have to somehow have my server-side backend gracefully concatenate + overlap + mix various smaller MP3/wav files into one MP3 file that matches the beat that they created on the client side. I then have to return that MP3 to the client side for download.

Anyone able to point me in the right direction?

As far as my research indicates, this isn't easily accomplished or feasible at all (I.E. within realistic budget / time constraints of the project) due to the complexity of the problem at hand.

1 Answers1

1

This is possible, and there are some audio libraries for JavaScript, but I would take a different approach.

The Web Audio API is very solid these days. You can have your user make all the adjustments client-side, and then generate the audio file right there in the user's browser. If you need to get a copy server-side, you can upload the raw PCM to your server (bandwidth intensive), or send the parameters to the server and re-generate the file.

Now unfortunately, PhantomJS doesn't support Web Audio. To generate a perfect server-side copy, I would execute Chrome with a special page that renders the audio and then uploads to the local server. This guarantees that the sound output you get is the exact same as that of the client, and leaves all of the heavy lifting to the Web Audio API already implemented in the browser.

You won't find much off-the-shelf for a project like this, but with a little creativity I think you will find that this isn't too difficult.

Brad
  • 159,648
  • 54
  • 349
  • 530
  • What client-side library(s) exist that let us generate an MP3 and give it to the user there? I haven't found any –  Apr 09 '14 at 18:14
  • There are no client-side MP3 encoding libraries at this time. Some folks have used emscripten to try to get LAME compiled to JavaScript, but to my knowledge nobody has gotten it working yet. You should be able to export a WAV file though as a blob. If you want MP3, you would have to encode that server-side, and for that I recommend running FFmpeg as a child process. – Brad Apr 09 '14 at 18:50
  • So client-side isn't an option, and apparently FFMpeg is the most reasonable solution for mixing + outputting MP3s serverside. [There is a Node.JS abstraction / implementation of FFMpeg](https://github.com/schaermu/node-fluent-ffmpeg) but it's options show that it can concatenate MP3s but it isn't very clear how to merge multiple channels of MP3s (potentially dozens) into a single MP3, starting and stopping the sub-channels inputs at specific intervals, etc etc.... is this really plausible? Doable, yes... but plausible? –  Apr 09 '14 at 18:54
  • I'm not suggesting you mix with FFmpeg, I'm saying you mix with the Web Audio API and convert your WAV to MP3 with FFmpeg. And... none of this has anything to do with Canvas (unless you're using Canvas for your UI, but certainly none of the audio has anything to do with it). And yes, it's possible. Go through this tutorial and if you can't figure it out in the time you have allotted for learning, then you have your answer: http://www.html5rocks.com/en/tutorials/webaudio/intro/ – Brad Apr 09 '14 at 19:04
  • There's a way to spit out .WAVs on the client-side, then? What framework? My issue is I'm unable to find any client-side libraries that let you basically mix downloaded-from-the-server small .wav/.mp3 files into a single output... all on the client-side... all with fancy mixing and such. Outputted into .wav or not, what would you use to perform said output? –  Apr 09 '14 at 19:05
  • The Web Audio API does all of that for you. Check out the tutorial I linked you to... it has examples for doing exactly what you are asking for. To dump the WAV file: https://github.com/mattdiamond/Recorderjs – Brad Apr 09 '14 at 19:09