Can I use Javascript to split up an MP3 file into smaller MP3 files?

Question

I am making a game using only HTML5 and Javascript. I want to take an MP3 file the user selects, and split into few second long chunks. Is it possible to do this in Javascript, and if so, how?

Answer 1

If you need a client side solution, but are not bound to Javascript, you may want to give Flash a try. There is many excellent solutions for editing in Flex/Actionscript. Here is one tutorial I came across after a quick google: http://scriptplayground.com/tutorials/as/Play-Sound-Samples-From-One-File-Using-ActionScript-3/

However, if you are dead set on using Javascript, try following these steps:

1. Check out this fiddle: http://jsfiddle.net/andrewodri/PKPD6/. It is using the HTML5 audio element to play a sound, but the interesting thing is that this data is encoded as a data URI. Whatever encoded data we throw at the source, it will be able to play.

2. Read up on the W3C File API specification, and especially the FileReader interface. The is support for this in Chrome and Firefox at least, although I am not too sure how comprehensive it is. You will notice that you are able to read the binary data into a data URI, which you can 1) manipulate as a string, and 2) send to the src attribute of the audio element.

3. This is going to be the hardest part... You can start by getting familiar with the structure of an MP3 file; ie. understanding how big the ID3 tag is and how to identify it, how big frames are and where you can chop them off, and how the file is closed. The will help you extract relevant information, but also figure out where you can start chopping. I put some references at the bottom. A lot of similar code has been created for this in Actionscript which may be a good reference.

If you have enough patience, you can do the following:

1. Retrieve the binary data of the uploaded file, and convert that into a data URI
2. Determine how big the ID3 tag is when encoded in base64 (base64 represents 6 bits with 1 character), and save that code to variable
3. Determine how big each audio frame is, and build an array of all the audio frames
4. Determine how the file is closed, and save that code into a variable
5. Stitch it all together however you like, with the ID3 at the front, your selected frames in the middle, and file closure code
6. Send it to the src attribute of the audio element

I would conclude by saying that it would be far, far easier to do this in Flash, or even to send it to the server as mentioned in other comments. But if you have the justification for doing it all in Javascript, this is definitely possible in most modern browsers.

Additional References:

• http://www.html5rocks.com/en/tutorials/file/dndfiles/
• http://www.mpgedit.org/mpgedit/mpeg_format/MP3Format.html
• http://www.mpgedit.org/mpgedit/mpeg_format/mpeghdr.htm
• http://www.aardwulf.com/tutor/base64/base64.pdf
• http://en.wikibooks.org/wiki/Algorithm_Implementation/Miscellaneous/Base64