JSFiddle - React, Tailwind, and code Playground

by rowntreerob

HTML

<script src="https://higuma.github.io/mp3-lame-encoder-js/js/Mp3LameEncoder.min.js"></script>
<button id="btnstart">Start</button>
<button id="btnstop" disabled>Stop</button>

JavaScript

//Browser compatibility
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;
var streamObj = null;
let config = {
    bufferLen: 4096,
    numChannels: 1,
	mimeType: 'audio/mpeg'
};   
let processor;

          document.querySelector("#btnstart").onclick = startStream; // Wire up start button
            document.querySelector("#btnstop").onclick = stopStream; // Wire up stop button


function startStream() {
    var ctx = new AudioContext()
    processor = 
    ctx.createScriptProcessor(config.bufferLen, config.numChannels, config.numChannels);
    processor.connect(audioContext.destination);
      if (navigator.getUserMedia) {
        //Request for the user media
        navigator.getUserMedia(
            {
              audio: true,
              video: false
            },
            onSuccess,
            onErrors
        );
    } else {
        console.log("User media is not supported.");
    }
    console.log("start")
}

function onSuccess(stream) {
    //Play the media stream in the video element
    streamObj = stream;
    console.log(stream.getAudioTracks()[0].getSettings());
    //video.src = window.URL.createObjectURL(streamObj);
    //video.play();
}

function onErrors(error) {
    //Handle the permission denied error in Chrome and 'Starting video failed' error in Firefox
    if (error.name == "PermissionDeniedError" || error == "Starting video failed") {
        alert("Media might already be in use");
    } else { //Handle all other errors
        console.log("error: ", error);
    }
}

function stopStream() {
    console.log("stop")
}