MediaRecorder Get Audio record-live-audio


<!doctype html>
<title>MediaRecorder examples – Record live audio</title>
<meta charset=”utf-8“>
<meta name=”viewportcontent=”width=device-width, initial-scale=1“>
<link rel=”stylesheethref=”styles.csstype=”text/css“>
<script src=”record-live-audio.js“></script>
<h1><a href=”index.html“>MediaRecorder examples</a></h1>
<p>Record live audio</p>
<p><button id=”recorddisabled>Record audio</button> <button id=”stopdisabled>Stop</button></p>
<p><audio id=”audiocontrols></audio></p>


// This example uses MediaRecorder to record from a live audio stream,
// and uses the resulting blob as a source for an audio element.
// The relevant functions in use are:
// navigator.mediaDevices.getUserMedia -> to get audio stream from microphone
// MediaRecorder (constructor) -> create MediaRecorder instance for a stream
// MediaRecorder.ondataavailable -> event to listen to when the recording is ready
// MediaRecorder.start -> start recording
// MediaRecorder.stop -> stop recording (this will generate a blob of data)
// URL.createObjectURL -> to create a URL from a blob, which we can use as audio src

var recordButton, stopButton, recorder;

window.onload = function () {
  recordButton = document.getElementById('record');
  stopButton = document.getElementById('stop');

  // get audio stream from user's mic
    audio: true
  .then(function (stream) {
    recordButton.disabled = false;
    recordButton.addEventListener('click', startRecording);
    stopButton.addEventListener('click', stopRecording);
    recorder = new MediaRecorder(stream);

    // listen to dataavailable, which gets triggered whenever we have
    // an audio blob available
    recorder.addEventListener('dataavailable', onRecordingReady);

function startRecording() {
  recordButton.disabled = true;
  stopButton.disabled = false;


function stopRecording() {
  recordButton.disabled = false;
  stopButton.disabled = true;

  // Stopping the recorder will eventually trigger the `dataavailable` event and we can complete the recording process

function onRecordingReady(e) {
  var audio = document.getElementById('audio');
  // contains a blob representing the recording
  audio.src = URL.createObjectURL(;;

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do

Você está comentando utilizando sua conta Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s