JSFiddle - React, Tailwind, and code Playground

by Max Liashuk

HTML

<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"></script>
<script src="https://weinre.mybluemix.net/target/target-script-min.js#zTest"></script>
 <div id="result"></div> 
<button class="play">Start</button>
<button class="stop">Stop</button>
<button class="resume">Resume</button>
<button class="salvar">Salvar</button>
  
 <div class="contador"></div>

JavaScript

var mediaConstraints = {
    audio: true
};

var mediaRecorder;
var blobURL;
function onMediaSuccess(stream) {
	$(function(){


	mediaRecorder = new MediaStreamRecorder(stream);    
    mediaRecorder.mimeType = 'audio/wav';
    mediaRecorder.audioChannels = 1;
    mediaRecorder.ondataavailable = function (blob) {
        // POST/PUT "Blob" using FormData/XHR2
        blobURL = URL.createObjectURL(blob);
        $("#result").append('<audio controls src="' + blobURL + '"></audio><br><a href="' + blobURL + '" target="_blank">' + blobURL + '</a>');
    };
    mediaRecorder.start(5000*5000);
    setTimeout(function(){
    	mediaRecorder.stop();
    }, 120 * 1000);//Se não clicar em parar, a gravação para automaticamente em 2 minutos.

    });
}

function onMediaError(e) {
    console.error('media error', (e && e.name)?e.name:e);
}

function onStop(){
	mediaRecorder.stop();
	mediaRecorder.stream.stop();
}

var interval;
function contadorIncremento(){
  var count = 1;
  interval = setInterval(function() { 
      if(count > 1)
        $('.contador').html("setInterval: Ja passou "+ count++ +" segundos!");
      else
        $('.contador').html("setInterval: Ja passou "+ count++ +" segundo!");
     }, 1000);
}

function stopContadorIncremento(){
    clearTimeout(interval);
    $('.contador').html("");
}

$(function(){
  
	$(".play").on("click", function(){ 
  		navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
       contadorIncremento();

  	});

  	$(".stop").on("click", function(){
  		mediaRecorder.stop();
      stopContadorIncremento();
  	});

  	$(".resume").on("click", function(){
  		mediaRecorder.resume();
  	});

  	$(".salvar").on("click", function(){
  		mediaRecorder.save();
  	});

 

});