[Web] Sound recording from microphone

Sound recording from microphone html

Working on sound in web is much harder than I imagined, it is challenging in features such as streaming, sound manipulation or sound wave generation. P5, processing, howler, d3 are great libraries to save your time in playing, downloading, recording or visualizing sound on website. But communicating between them , such as recording sound in P5.js and visualise it on d3.js, is going to be a nightmare.

— This is a npm @bigear/microphone-recorder package is wrapped a microphone recording library

— This is the demo

If you want the sound library in a way is better integration, lighter(less 3rd party library), and needs the functionalities those libraries can not satisfy you. Then these knowledge is the must know party to understand how audio work on browser:

1- navigator.mediaDevices.getUserMedia()

It prompts the user for permission to use a media input which produces a [MediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream "The MediaStream interface represents a stream of media content. A stream consists of several tracks such as video or audio tracks. Each track is specified as an instance of MediaStreamTrack."). Read more

navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {  /* use the stream */})

2- AudioContext.createMediaStreamSource()

It creates a new [MediaStreamAudioSourceNode](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamAudioSourceNode "A MediaStreamAudioSourceNode has no inputs and exactly one output, and is created using the AudioContext.createMediaStreamSource method. The number of channels in the output equals the number of channels in AudioMediaStreamTrack. If there is no valid media stream, then the number of output channels will be one silent channel.") object, the MediaStreamAudioSourceNode interface represents an audio source.

You can think of the source in :

<audio ><source src="horse.mp3" type="audio/mpeg"></audio>

3- Web Workers

Web Workers is the Salvator of browser multi-threaded, it is truly multi-threaded.

Web Workers run in an isolated thread, it utilize thread-like message passing to achieve parallelism. They’re perfect for keeping your UI refresh, performant, and responsive for users.

The basic methods are : constructor, postMessage and onmessage

if (window.Worker) {   

myWorker.postMessage('string .....');

   myWorker.onmessage = function(e) {       ...   }}

4- ArrayBuffer

It is an object represents a generic, fixed-length raw binary data buffer.

There are couple of data objects they appear very often in sound engineering, Float32Array, TypedArray, Int8Array etc.

// create an ArrayBuffer with a size in bytesvar buffer = new ArrayBuffer(8);

console.log(buffer.byteLength);// expected output: 8

Reference

— https://www.npmjs.com/package/@bigear/microphone-recorder

— https://github.com/wahengchang/bigear/blob/master/packages/microphone-recorder/src/Recorder.js

— https://vue-sound-streaming.herokuapp.com/MicAudioContext