JSFiddle - React, Tailwind, and code Playground

by dozoisch

HTML

<div style="text-align:center;">
  <audio id="basic-stream" class="audiostream" autoplay controls="false"></audio>
  <p><button id="capture-button">Capture audio</button> <button id="stop-button">Stop</button></p>
</div>

JavaScript

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var audio = document.querySelector('#basic-stream');
var button = document.querySelector('#capture-button');
var localMediaStream = null;

function errorCallback(e) {
  if (e.code == 1) {
    alert('User denied access to their camera');
  } else {
    alert('getUserMedia() not supported in your browser.');
  }
}

button.addEventListener('click', function(e) {
    if (navigator.getUserMedia) {
        navigator.getUserMedia({
            audio: true,
            video: false
        }, function (stream) {
            audio.src = window.URL.createObjectURL(stream);
            audio.controls= true;
            localMediaStream = stream;
        }, errorCallback);
    } else {
        errorCallback({target: audio});
    }
});

document.querySelector('#stop-button').addEventListener('click', function(e) {
  audio.pause();
  localMediaStream.stop(); // Doesn't do anything in Chrome.
}, false);