JSFiddle - React, Tailwind, and code Playground

by Tushar Thakare

HTML

<script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>
            <section class="experiment">  
                <h2 class="header">Record Audio (both Chrome/Firefox)</h2>
			
                <div class="inner" style="height: 5em;">
                    <audio id="audio" autoplay controls></audio><br><br><br><br><br>
                    <button id="record-audio">Record</button>
                    <button id="stop-recording-audio" disabled>Stop</button>
                    <h2 id="audio-url-preview"></h2>
                </div>
            </section>

CSS

audio {
                vertical-align: bottom;
                width: 10em;
            }


            input {
                border: 1px solid #d9d9d9;
                border-radius: 1px;
                font-size: 2em;
                margin: .2em;
                width: 30%;
            }

JavaScript

function getByID(id) {
                    return document.getElementById(id);
                }

                var recordAudio = getByID('record-audio'),
                    stopRecordingAudio = getByID('stop-recording-audio');

                var audio = getByID('audio');


                var audioConstraints = {
                    audio: true,
                    video: false
                };



var audioStream;
                var recorder;

                recordAudio.onclick = function() {
                    if (!audioStream)
                        navigator.getUserMedia(audioConstraints, function(stream) {
                            if (window.IsChrome) stream = new window.MediaStream(stream.getAudioTracks());
                            audioStream = stream;

                            audio.src = URL.createObjectURL(audioStream);
                            alert(audio.src);
                            audio.muted = true;
                            audio.play();

                            // "audio" is a default type
                            recorder = window.RecordRTC(stream, {
                                type: 'audio'
                            });
                            recorder.startRecording();
                        }, function() {
                        });
                    else {
                        audio.src = URL.createObjectURL(audioStream);
                        alert(audio.src);
                        audio.muted = true;
                        audio.play();
                        if (recorder) recorder.startRecording();
                    }

                    window.isAudio = true;

                    this.disabled = true;
                    stopRecordingAudio.disabled = false;
                };


                stopRecordingAudio.onclick = function() {
                    this.disabled = true;
                    recordAudio.disabled = false;
                    audio.src = '';

              ...