javascript

Have you ever wondered how you can record your microphone using javascript? Since the MediaRecorder api landed in browsers it became very easy to do so. To start we'll need to get access to the microphone. We can do this by using the getUserMedia method. navigator.mediaDevices.getUserMedia({audio: true}).then(stream => { // All went well, here is an audio-stream of your microphone }, error => { // Oops, something went wrong or your browser does not support mediaDevices.getUserMedia }); Calling getUserMedia will return a promise, which when resolved will return an audio-stream of your microphone. We will need this stream when creating…

I've recently started creating an online audio editor. One of the features I wanted to implement was to create a waveform for each track in the editor. This gives a nice overview of the content of each track. While recording a new track, it would be cool to visually see the the waveform you're recording so I decided to generate a waveform in realtime while recording a new audio track. Below I will go through the basics of how you can create such a waveform from your audio input device. To get ahold of the microphone audio in a web…

This year has been the year I started talking in front of a public. It all started at the end of last year when I gave my first public presentation at the Fronteers meetup in Belgium. I decided that I wanted to learn more about the web-audio-api, and set myself the goal of making a presentation about it. Since I'm a guitar player I quickly ended up trying to recreate some effects and applying them to the sound of my guitar in real-time. Of course all in the browser. This turned out to be something people like to hear about,…