Create an mp3 file using the arrayBuffer functionality

Question

Create an mp3 file using the arrayBuffer functionality

Struggling with StackOverflow, I attempted to record audio from a Raspberry Pi using Node.js (1). The audio stream is then sent through a WebSocket server (code omitted for simplicity), where a Vue.js WebSocket listens to the stream. My goal is to save this stream as an mp3 file (2), but I encounter noise or receive no output.

Raspberry Pi:

ai = new audio.AudioIO({
        inOptions: {
          channelCount: 1,
          sampleFormat: audio.SampleFormat16Bit,
          sampleRate: 44100,
          deviceId: 6, 
          closeOnError: true
        }
      });

      ai.on('data', buf => {
      
      clientAudioWebsocket.send(buf)
      }
      );
     
      ai.start();

Vue.js Portion

this.dataBuffer = []

   var self = this

   var connectionToLocalServer = new WebSocket("ws://"+ip  +":4444")
   connectionToLocalServer.binaryType = "arraybuffer"

    connectionToLocalServer.onmessage = function(event) {
        self.dataBuffer.push(event.data);

    }
    connectionToLocalServer.onopen = function(event) {


  }

Converting arraybuffer to mp3

concatArrayBuffers (bufs) {
                          var offset = 0;
                          var bytes = 0;
                          var bufs2=bufs.map(function(buf,total){
                              bytes += buf.byteLength;
                              return buf;
                          });
                          var buffer = new ArrayBuffer(bytes);
                          var store = new Uint8Array(buffer);
                          bufs2.forEach(function(buf){
                              store.set(new Uint8Array(buf.buffer||buf,buf.byteOffset),offset);
                              offset += buf.byteLength;
                          });
                          return buffer }

          this.tmpResult = this.concatArrayBuffers(this.dataBuffer);

          var mp3Data = [];
          var mp3encoder = new lamejs.Mp3Encoder(1, 44100, 128);
          var mp3Tmp = mp3encoder.encodeBuffer(this.tmpResult, 0, Math.floor(this.tmpResult.byteLength / 2)); 

          mp3Data.push(mp3Tmp);
          mp3Tmp = mp3encoder.flush();
          mp3Data.push(mp3Tmp);

Confused by the arraybuffer size of 16384, I am seeking solutions without involving server-side processing. Thank you.

javascript node.js vue.js audio websocket

Answer 1

Answer №1

After some searching, I finally found the solution to my problem. It turns out that I forgot to create an Int16Array - a simple mistake with a big impact! (Note to self: sometimes stepping away for an hour can help clear your mind and lead you to the answer).

Here is the solution I discovered:

let tmpResult = this.concatArrayBuffers(this.dataBuffer)
     
var samples = new Int16Array(tmpResult);
var buffer = [];
var mp3enc = new lamejs.Mp3Encoder(1, 44100, 128);
var remaining = samples.length;
var maxSamples = 1152;
for (var i = 0; remaining >= maxSamples; i += maxSamples) {
     var mono = samples.subarray(i, i + maxSamples);
     var mp3buf = mp3enc.encodeBuffer(mono);
     if (mp3buf.length > 0) {
         buffer.push(new Int8Array(mp3buf));
        }
        remaining -= maxSamples;
}
var d = mp3enc.flush();
if(d.length > 0){
 buffer.push(new Int8Array(d));
}

console.log('done encoding, size=', buffer.length);
var blob = new Blob(buffer, {type: 'audio/mp3'});

Answer 2

After some searching, I finally found the solution to my problem. It turns out that I forgot to create an Int16Array - a simple mistake with a big impact! (Note to self: sometimes stepping away for an hour can help clear your mind and lead you to the answer).

Here is the solution I discovered:

let tmpResult = this.concatArrayBuffers(this.dataBuffer)
     
var samples = new Int16Array(tmpResult);
var buffer = [];
var mp3enc = new lamejs.Mp3Encoder(1, 44100, 128);
var remaining = samples.length;
var maxSamples = 1152;
for (var i = 0; remaining >= maxSamples; i += maxSamples) {
     var mono = samples.subarray(i, i + maxSamples);
     var mp3buf = mp3enc.encodeBuffer(mono);
     if (mp3buf.length > 0) {
         buffer.push(new Int8Array(mp3buf));
        }
        remaining -= maxSamples;
}
var d = mp3enc.flush();
if(d.length > 0){
 buffer.push(new Int8Array(d));
}

console.log('done encoding, size=', buffer.length);
var blob = new Blob(buffer, {type: 'audio/mp3'});

Answer 3

Answer №2

If you're looking to explore more, check out this link -> https://github.com/johndoe/audio-recording-tool. It's worth checking out. I have plans to develop a user-friendly web application for this purpose instead of relying on cronjob. Instructions

To get started, simply run the command below in your terminal or set it up as a recurring cronjob:

$ node record.js -s "http://musicstreaming.com" -d 15000 -o "./musiclibrary"

Please make sure that when setting this up as a cronjob, you provide absolute paths for both node and record.js files. Parameters

-s The URL of the audio stream to be recorded (default http://musicstreaming.com)
-d Recording duration in milliseconds (default 10000)
-o Output directory for saving the file (default ./musiclibrary)

Integration with IFTTT

In addition, you can include these parameters to integrate with an IFTTT Webhook applet that triggers upon completion of each recording.

--ifttt_event Specify the Event Name used in the Webhook applet
--ifttt_key User's unique IFTTT Webhooks key

Answer 4

If you're looking to explore more, check out this link -> https://github.com/johndoe/audio-recording-tool. It's worth checking out. I have plans to develop a user-friendly web application for this purpose instead of relying on cronjob. Instructions

To get started, simply run the command below in your terminal or set it up as a recurring cronjob:

$ node record.js -s "http://musicstreaming.com" -d 15000 -o "./musiclibrary"

Please make sure that when setting this up as a cronjob, you provide absolute paths for both node and record.js files. Parameters

-s The URL of the audio stream to be recorded (default http://musicstreaming.com)
-d Recording duration in milliseconds (default 10000)
-o Output directory for saving the file (default ./musiclibrary)

Integration with IFTTT

In addition, you can include these parameters to integrate with an IFTTT Webhook applet that triggers upon completion of each recording.

--ifttt_event Specify the Event Name used in the Webhook applet
--ifttt_key User's unique IFTTT Webhooks key

Create an mp3 file using the arrayBuffer functionality

Answer №1

Answer №2

Similar questions

Updating the value of a $scope variable located within an included template in AngularJS

Tips for positioning text on the left and right sides of a div in HTML styling

Create a unique functionality by assigning multiple event handlers to a single event

Error encountered with NG6 Angular sass files

Coming back from retrieving data from an API

Here is a unique rewrite:"Adjusting the prop of a Material UI Button component depending on screen size breakpoints can be achieved by utilizing

Is NodeJS significantly slower compared to PHP?

Trouble with Firebase Setup in Ionic 4+ Web Application

Is it possible to utilize NodeMailer within strongloop for sending emails?

What is the best way to append a JavaScript object to a JSON file on a new line

What is the best way to retrieve an array that was created using the useEffect hook in React?

Parsing error: Unforeseen token encountered. Consider adding a supplementary loader to manage the output of these loaders

What sets apart a class from a service in NativeScript?

The mobile navigation in HTML has a slight issue with the ::after pseudo-element, specifically within the

Angular Testing - issue with promise returning unexpected results

Unlocking location data in React Router-DOM 6: A step-by-step guide

PHP Ajax not updating variable as expected

Can you explain the purpose of using 'created' and 'activated' with keep-alive components in Vue.js?

Using Cookies with Next.js and Vercel

Tips and tricks for personalizing an npm package in vue.js