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. Now we need to join the audio files into a single file.

Example: File_1 (4 mins in length), File_2 (3 mins in length). We need a new combined single audio file which should be of 10 mins length (File_1 + 3 mins silence + File_2)

Is there way to get this in a client side mobile application using angular or cordova?

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