CODEWITHSUNDEEP
javascriptaudioweb-audio-api
Thatdude1
Thatdude1

Reputation: 903

Web Audio Api - Download edited MP3

I'm currently editing my mp3 file with multiple effects like so

var mainVerse = document.getElementById('audio1');

var s = source;
source.disconnect(audioCtx.destination);

for (var i in filters1) {
 s.connect(filters1[i]);
 s = filters1[i];
}

s.connect(audioCtx.destination);

The mp3 plays accordingly on the web with the filters on it. Is it possible to create and download a new mp3 file with these new effects, using web audio api or any writing to mp3 container javascript library ? If not whats the best to solve this on the web ?

UPDATE - Using OfflineAudioContext

Using the sample code from https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext/oncomplete

I've tried using the offline node like so;

var audioCtx = new AudioContext();
var offlineCtx = new OfflineAudioContext(2,44100*40,44100);

osource = offlineCtx.createBufferSource();

function getData() {
      request = new XMLHttpRequest();
      request.open('GET', 'Song1.mp3', true);
      request.responseType = 'arraybuffer';
      request.onload = function() {
        var audioData = request.response;
        audioCtx.decodeAudioData(audioData, function(buffer) {
          myBuffer = buffer;
          osource.buffer = myBuffer;
          osource.connect(offlineCtx.destination);
          osource.start();
          //source.loop = true;
          offlineCtx.startRendering().then(function(renderedBuffer) {
            console.log('Rendering completed successfully');
            var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 
            var song = audioCtx.createBufferSource();
            song.buffer = renderedBuffer;
            song.connect(audioCtx.destination);
            song.start();
            rec = new Recorder(song, {
                workerPath: 'Recorderjs/recorderWorker.js'
            });   

            rec.exportWAV(function(e){
                rec.clear();
                Recorder.forceDownload(e, "filename.wav");
            });
          }).catch(function(err) {
              console.log('Rendering failed: ' + err);
              // Note: The promise should reject when startRendering is called a second time on an OfflineAudioContext
          });
        });
      }
      request.send();
    }
    // Run getData to start the process off
getData();

Still getting the recorder to download an empty file, I'm using the song source as the source for the recorder. The song plays and everything with his code but recorder doesn't download it

Upvotes: 1

Views: 3641

Answers (1)

Oskar Eriksson
Oskar Eriksson

Reputation: 2641

Use https://github.com/mattdiamond/Recorderjs to record a .wav file. Then use https://github.com/akrennmair/libmp3lame-js to encode it to .mp3.

There's a nifty guide here, if you need a hand: http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/

UPDATE

Try moving

rec = new Recorder(song, {
    workerPath: 'Recorderjs/recorderWorker.js'
});

so that it is located above the call to start rendering, and connect it to osource instead, like so:

rec = new Recorder(osource, {
      workerPath: 'Recorderjs/recorderWorker.js'
}); 
osource.connect(offlineCtx.destination);
osource.start();
offlineCtx.startRendering().then(function(renderedBuffer) {
     .....

Upvotes: 1

Related Questions