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?

If you are asking to "How to do that" so there is no specific answer. Although there are libraries for handling audio on PCM or buffer level. — Murtaza Khursheed Hussain, Aug 17 '15 at 06:44
if you are building a mobile application ,you can use java to join your mp3 files. To call java file you have to write a plugin in cordova which is going to call it. You can take the example of "Toast" plugin in cordova. — neetesh, Aug 19 '15 at 10:43
I know this isnt client side but if you are using a node server you could process the audio there http://blog.ragingflame.co.za/2013/5/31/using-nodejs-to-join-audio-files — Jess Patton, Aug 19 '15 at 14:39
What about ffmpeg.js in the browser? https://paul.kinlan.me/running-ffmpeg-with-wasm-in-a-web-worker/ I totally get the idea of this question, if the conversion is done on the client side you save a lot of processing of the backend side — pikilon, Aug 19 '19 at 20:02

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

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

Just a note: PouchDB allows directly storing Blobs as attachments, so you don't need to convert to base64 (which is inefficient): http://pouchdb.com/guides/attachments.html — nlawson, Aug 24 '15 at 15:10

score 3 · Answer 2 · edited May 23 '17 at 11:45

3

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):

edited May 23 '17 at 11:45

Community

1
1

answered Aug 25 '15 at 18:47

lifeisfoo

15,478
6
74
115

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

2 Answers2

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

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

Linked