Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to write .wav file from blob in Javascript/Node

I'm trying to write a .wav file with fs.writeFile. The file is created successfully, however it's only 8-13bytes long, so obviously I'm not doing something right.

If the blob is already audio/wav can I write to disk or do I need to convert it to Base 64?

I'm pretty much at a loss here, I found another similar thread with no answer - Here

Any input would be appreciated.

routerApp.controller('audiotest', function($scope) {
 $scope.saveToDisk = function(){
  var nw = require('nw.gui');
  var fs = require('fs');
  var path = require('path');
  fs.writeFileSync('test.wav', $scope.recordedInput)
 };
}

console.log($scope.recordedInput) returns Blob {size: 294956, type: "audio/wav"}

It's not really relevant, but here's my HTML

<div class="row" ng-controller="audiotest">
<div class="row">
    <button type="button" ng-click="saveToDisk()"> Write this sucker to disk </button>
    </div>

<ng-audio-recorder id='audioInput' audio-model='recordedInput'>
  <!-- Start controls, exposed via recorder-->
  <div ng-if="recorder.isAvailable">
    <button ng-click="recorder.startRecord()" type="button" ng-disabled="recorder.status.isRecording">
        Start Record
    </button>
    <button ng-click="recorder.stopRecord()" type="button" ng-disabled="recorder.status.isRecording === false">
        Stop Record
    </button>

</ng-audio-recorder>
</div>
like image 331
angularchobo Avatar asked Sep 08 '16 15:09

angularchobo


People also ask

How do I create a WAV Blob from an arraybuffer?

After writing the WAVE header, we write the buffer to the ArrayBuffer sample by sample. The finished ArrayBuffer is then passed into the Blob constructor with the WAV audio file type. The function returns this new Blob. Notice the line with the comment that reads ‘write 16-bit sample’. This line writes an audio sample to the new ArrayBuffer.

What is a blob in JavaScript?

In the browser, there are additional higher-level objects, described in File API, in particular Blob. Blob consists of an optional string type (a MIME-type usually), plus blobParts – a sequence of other Blob objects, strings and BufferSource.

How do I write to a file in Node JS?

The easiest way to write to files in Node.js is to use the fs.writeFile () API. const content = 'Some content!'; Alternatively, you can use the synchronous version fs.writeFileSync (): const content = 'Some content!'; You can also use the promise-based fsPromises.writeFile () method offered by the fs/promises module:

How to get an audiobuffer in JavaScript?

I’ll quickly summarize the below JavaScript code we’ll be starting with to get an AudioBuffer. The user uploads an audio file using the file input and clicks a button with id ‘compress_btn’ to start the process.


2 Answers

Using mscdex answer.

This is what worked for me when using NodeWebkit as browser.

var fileReader = new FileReader();
fileReader.onload = function () {
       fs.writeFileSync('test.wav', Buffer(new Uint8Array(this.result)));
};
fileReader.readAsArrayBuffer(blob);

Notice the "from" method of Buffer has disappear. And "blob" that is passed in my last line is audio data encoded in wav.
For the rest, its only magic. Don't ask me...

like image 175
Doctor Avatar answered Oct 13 '22 00:10

Doctor


I had issues getting either of these to work for me. I found success, and much easier implementation with this node module express-fileupload. Here's some code:

var express = require('express');
var fileUpload = require('express-fileupload');

app.use(fileUpload());

app.post('/', function(req, res) {


  console.log(req.files.data);
  req.files.data.mv('test.wav', function(err) {
    if (err) {
      console.log(err);
    }
  });
});
like image 30
rickrizzo Avatar answered Oct 12 '22 22:10

rickrizzo