Node.js can't create Blobs?
JavascriptHtmlnode.jsAudioJavascript Problem Overview
I am working with node.js and I streamed my Audio to my node.js server. Now I noticed during the process of building the audio blob:
var audioBlob = new Blob([dataview], { type: 'audio/wav' });
That I get a ReferenceError at new Blob. It seems that Blob is not supported. How can I create a blob which I would like to save with node.js fs module.
Thanks guys!
Javascript Solutions
Solution 1 - Javascript
The Solution to this problem is to create a function which can convert between Array Buffers and Node Buffers. :)
https://stackoverflow.com/questions/8609289/convert-a-binary-nodejs-buffer-to-javascript-arraybuffer
In recent node versions it's just:
let buffer = Buffer.from(arraybuffer);
let arraybuffer = Uint8Array.from(buffer).buffer;
Solution 2 - Javascript
Since Node.js 16, Blob
can be imported:
import {Blob} from 'node:buffer';
new Blob([]);
//=> Blob {size: 0, type: ''}
Otherwise, just use cross-blob
:
import Blob from 'cross-blob';
new Blob([]);
//=> Blob {size: 0, type: ''}
// Global patch (to support external modules like is-blob).
globalThis.Blob = Blob;
Solution 3 - Javascript
> ##### Note: This answer only applies if you want to follow the Richie Bendall's answer.
Short answer:
Avoid importing Blob
from 'node:buffer'
.
Instead, prefer importing it like this (as explained in the NodeJS docs. (implementation example here)):
import { Blob } from 'buffer';
Long answer:
The Richie Bendall's answer helped me a lot. But it seems that importing Blob
from node:buffer
breaks the Jest unit tests, throwing this error:
FAIL dist/tests/unit/users/getOneById.spec.js
● Test suite failed to run
ENOENT: no such file or directory, open 'node:buffer'
2 | import config from '../config/config';
3 | import { getFileExt, getFileName, removeFile } from './file';
> 4 | import { Blob } from 'node:buffer';
| ^
5 |
6 | class PdfHelpers {
7 |
at Runtime.readFile (node_modules/jest-runtime/build/index.js:2118:21)
at Object.<anonymous> (src/helpers/pdf.ts:4:1)
Instead of trying to mock the node:buffer
import with some weird/tricky code, I took a look at the NodeJS documentation examples. So it demonstrates that Blob
can be imported from 'buffer'
import { Blob } from 'buffer';
// ...
// Only the import is changing, don't change your existing implementation
const blob = new Blob([buf], { type: 'application/pdf' });
And all Jest errors have been gone away!
Solution 4 - Javascript
Another solution to consider is to use a Base64 String to transfer data from the Server to the client.
I am working on a Node.js project where I receive audio data in the form of an ArrayBuffer, and I want to send and play that data in the browser. Most of my struggles came from trying to send the ArrayBuffer to the client or trying to convert the ArrayBuffer and send a Buffer.
What ended up being a simple solution for me was to
- Convert the ArrayBuffer to a Base64 encoded String on the Server
- Return/Send the Base64 String to the client from the server
- Create an Audio element/object on the client side and play the sound
I used base64-arraybuffer to perform the ArrayBuffer > Base64 String conversion (though, it may be simple to do this without a package).
I used tips from here to create the audio element on the client side.
*I haven't done much in the way of testing limits - so I don't know how this might handle large audio files.