1. recorder-js
Record audio in your browser
recorder-js
Package: recorder-js
Created by: ijsnow
Last modified: Sun, 26 Jun 2022 09:34:15 GMT
Version: 1.0.7
License: MIT
Downloads: 13,150
Repository: https://github.com/ijsnow/studiojs

Install

npm install recorder-js
yarn add recorder-js

Recorder.js

An easy to use audio recorder with on Matt Diamond's
recorderjs at the core.

Installation

yarn add recorder-js # or npm install recorder-js --save

Usage

 import Recorder from 'recorder-js';

const audioContext =  new (window.AudioContext || window.webkitAudioContext)();

const recorder = new Recorder(audioContext, {
  // An array of 255 Numbers
  // You can use this to visualize the audio stream
  // If you use react, check out react-wave-stream
  onAnalysed: data => console.log(data),
});

let isRecording = false;
let blob = null;

navigator.mediaDevices.getUserMedia({audio: true})
  .then(stream => recorder.init(stream))
  .catch(err => console.log('Uh oh... unable to get stream...', err));

function startRecording() {
  recorder.start()
    .then(() => isRecording = true));
}

function stopRecording() {
  recorder.stop()
    .then(({blob, buffer}) => {
      blob = blob;

      // buffer is an AudioBuffer
    }));
}

function download() {
  Recorder.download(blob, 'my-audio-file'); // downloads a .wav file
}

Cool stuff that helped me out

  • https://github.com/mattdiamond/Recorderjs
  • https://github.com/cwilso/AudioRecorder
  • https://codepen.io/zapplebee/pen/gbNbZE

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code