Using the Mic to Record Audio on a Browser

I've had a few clients who have wanted to capture audio from a user and upload that audio to the server. Usually it was because they wanted the user to just chat instead of type in their response to a question.  As it turns out, this isn't that hard these days.  Advances in JavaScript with Files, Audio, MediaRecorder as well as 3rd party libraries can really make this easy.  Here are 2 examples.

CAPTURE AUDIO AS WEBA

This example doesn't use any 3rd party libraries. It's clean and quick.

<html>
<head>
    <title>audio recorder test</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        li { list-style: none; }
    </style>
</head>
<body>
    <div class="container text-center">
        <h1>Mic Recorder to weba Example</h1>
        <p>Check your web developer tool console for output.</p>

        <hr />

        <button class="btn btn-primary">Start recording</button>

        <br />
        <br />
        <br />

        <ul id="playlist"></ul>
    </div>

    <!--
        <a id="download">Download</a>
        <button id="stop">Stop</button>
        <br />
        <audio id="player" controls></audio>
    -->

    <script>
        const button = document.querySelector('button');

        const options = {mimeType: 'audio/webm'};
        const buffer = [];
        var mediaRecorder = null;

        // start the recording
        const startRecording = function() {
            mediaRecorder.start();
            button.classList.toggle('btn-danger');
            button.removeEventListener('click', startRecording);
            button.addEventListener('click', stopRecording);
        }

        // stop the recording
        const stopRecording = function() {
            mediaRecorder.stop();
            button.textContent = 'Start recording';
            button.classList.toggle('btn-danger');
            button.removeEventListener('click', stopRecording);
            button.addEventListener('click', startRecording);
        }

        // init the audio system
        const handleInit = function(stream) {
            // start recording with a click of the button
            button.addEventListener('click', startRecording);

            // the mediaRecord object that captures the stream
            mediaRecorder = new MediaRecorder(stream, options);

            // catches stream of bytearray
            mediaRecorder.addEventListener('dataavailable', function(e) {
                if (e.data.size > 0) buffer.push(e.data);
            });

            // when stopped, create a file and allow playback
            mediaRecorder.addEventListener('stop', function() {
                console.dir(buffer);
                // create a file
                const file = new File(buffer, 'audio.webm', {
                    type: 'audio/webm',
                    lastModified: Date.now()
                });

                // display the file via an Audio object
                const li = document.createElement('li');
                const player = new Audio(URL.createObjectURL(file));
                player.controls = true;
                li.appendChild(player);
                document.querySelector('#playlist').appendChild(li);
                buffer.length = 0; // empty the buffer for the next one
            });          
        };

        // init the stream from the audio device
        navigator.mediaDevices.getUserMedia({ audio: true, video: false })
            .then(handleInit);

    </script>
</body>
</html>

Copy

CAPTURE AUDIO AS MP3

This example uses a a library called mic-recorder-to-mp3
https://github.com/closeio/mic-recorder-to-mp3

<html>
<head>
    <title>audio recorder test</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://unpkg.com/mic-recorder-to-mp3"></script>
    <style>
        li { list-style: none; }
    </style>
</head>
<body>
    <div class="container text-center">
        <h1>Mic Recorder to Mp3 Example</h1>
        <p>Check your web developer tool console for output.</p>

        <hr />

        <button class="btn btn-primary">Start recording</button>

        <br />
        <br />
        <br />

        <ul id="playlist"></ul>
    </div>

     <script>
        const button = document.querySelector('button');

        // set the options of this 3rd party mp3 js encoder
        const recorder = new MicRecorder({
            bitRate: 128
        });

        // start recording with a click of the button
        button.addEventListener('click', startRecording);

        // start the recording
        function startRecording() {
            recorder.start().then(() => {
                button.textContent = 'Stop recording';
                button.classList.toggle('btn-danger');
                button.removeEventListener('click', startRecording);
                button.addEventListener('click', stopRecording);
            }).catch((e) => {
                console.error(e);
            });
        }

        // stop the recording
        function stopRecording() {
            // create the mp3
            recorder.stop().getMp3().then(([buffer, blob]) => {
                console.log(buffer, blob);
                // create the file
                const file = new File(buffer, 'audio.mp3', {
                    type: blob.type,
                    lastModified: Date.now()
                });

                // display the as an Audio object
                const li = document.createElement('li');
                const player = new Audio(URL.createObjectURL(file));
                player.controls = true;
                li.appendChild(player);
                document.querySelector('#playlist').appendChild(li);

                // reset
                button.textContent = 'Start recording';
                button.classList.toggle('btn-danger');
                button.removeEventListener('click', stopRecording);
                button.addEventListener('click', startRecording);
            }).catch((e) => {
                console.error(e);
            });
        }
    </script>
</body>
</html>

Copy

CONCLUSION

Once you have your File Blob, you can either just play it back or transfer it to the server side and save or process it from there.