Joining multiple audio files into a single audio file in client side

Question

We are building a exercise app using ionic framework, which need to play multiple audio files in sequence with specific interval between each audio file. We got this working

Answer 1

Client-side javascript cannot do that, but it's possible on server-side.

Basic technically steps:

• send those files to server
• server does whatever you want and sends result back

If you are using node.js it's pretty easy

• send files to server using multer
• modify files server-side using node-stream and send back

This article describes basic mp3 file concatenation on node.js

But if you still want client-side. Theoretically this should work.

Note, this is very hackish way, you might hit many restrictions (application speed, battery consumption, local storage limit, etc) and you still will not have single file, but single format.

• Convert files to base64 using btoa, example

And use custom format like

var CustomFile = function(array_of_base64_files){
    var prepared_files = [];
    for (var i = 0; i < array_of_base64_files.length; i++) {
        var file = array_of_base64_files[i];
        prepared_files.push({
            created: Date.now(),
            order: i,
            base64: file
        });
    };
    this.export = function(){
        return prepared_files;
    }
};

• Save it to browser by using PouchDB, it has some limits which you can read in docs
• When you want to play it, get back CustomFile from pouchdb
• decode those base64 to file and use window.URL.createObjectURL(formBlob); so that HTML5 Audio can play it

Answer 2

You could create a cordova plugin that manage the files concat in the javascript layer but really join them in the native layer.

Other interesting question about audio merging (only in Android):

• Android concat 2 audio (wav or mp3) files

• How to merge two mp3 files into one (combine/join)

• Concatenate two audio files and play resulting file