Playing with MediaStream API
I recently purchased a new headset for use on video conference calls at work. I wanted to test out the microphone to see how it sounded compared to my internal MacBook microphone. I started fiddling around with using macOS Voice Memos and it worked but it wasn’t long until I was looking on the web for “test microphone” site. Sadly, the sites I found were full of ads and bloated with things I didn’t want.
Since I’m a developer and can’t help myself, I set out to build something to my own liking. It was time to play with the MediaStream API, something I really haven’t developed for before.
The way I like to learn something new is to get the big picture first. Then, dive into the details. Here in this case, this meant getting a super simple script working that would start recording when the page is opened, stop after 5 seconds, and automatically play it back. It ended up like this:
// This script starts recording when the page is loaded, stops after 5 seconds
// and then automatically plays back what was recorded.
navigator.mediaDevices.getUserMedia({ audio: true }).then(function(stream) {
let chunks = [];
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = function(e) {
// Store data stream chunks for future playback
chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
// Playback recording
const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
const audio = document.createElement("audio");
audio.src = window.URL.createObjectURL(blob);
document.body.appendChild(audio);
audio.play();
// Clear recording
chunks = [];
};
// Start recording!
mediaRecorder.start();
// Record for 5 seconds then stop and playback
setTimeout(()=>{
mediaRecorder.stop();
}, 5000);
});If you drop the above code in a <script> tag you have a working recorder / playback. Easy and simple!
For the record, this MDN article and corresponding demo were really helpful in understanding how the MediaStream API works.
Once I had that working, I iterated on the details and eventually landed with something I like and find useful: an app where you click ‘Record’, make some sound, click ‘Stop’ and then it automatically plays it back. Simple, right? Also, it shows a nice little realtime graph of the audio input.
It looks like this:
You can see the working app here: https://bradymholt.github.io/test-microphone/ and view the source here: https://github.com/bradymholt/test-microphone.