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. are great libraries to save your time in 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. P5, processing, howler, d3 playing, downloading, recording or visualizing — This is a package is wrapped a microphone recording library npm @bigear/microphone-recorder — 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 object, the interface represents an audio source. [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.") MediaStreamAudioSourceNode You can think of the in : source <audio >< src="horse.mp3" type="audio/mpeg"></audio> source 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 : , and constructor postMessage onmessage if (window.Worker) { .postMessage('string .....'); myWorker 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, , , etc. Float32Array TypedArray Int8Array // create an ArrayBuffer with a size in bytesvar buffer = new (8); ArrayBuffer console.log( .byteLength);// expected output: 8 buffer 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
![featured image - [Web] Sound recording from microphone](https://hackernoon.imgix.net/fallback-feat.png?auto=format&fit=max&w=2048)
![[Note] 19 Coding Rules that every coder must know](https://hackernoon.imgix.net/hn-images/1*LwkasdSEFs7rhv21ayrfxA.png?auto=format&fit=max&w=3840)
