How to capture microphone audio using HTML5 Audio API?

Asked

Viewed 3,832 times

8

How do I capture microphone audio using the HTML5 Audio API and play it at the same time?

javascript html5 html5-audio
  • 3

    Note: There is a bug in Google Chrome because just "audio" streaming doesn’t work: topical. The element <audio> also would not work in Opera. extracted

  • thanks for the tips. With my insistence and need, I searched the internet almost all and I could find what I wanted. In the Link below there are several great examples and one that was well suited to my need. The link is here: https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP Thanks, hugs to all. Stay with God!

2 answers

3

Here’s a short snippet of code that accomplishes this (successfully tested in Chrome 33 and Firefox 28):

var audioContext, microphoneStream;

function getUserMedia_Success(mediaStream) {
    microphoneStream = audioContext.createMediaStreamSource(mediaStream);
    //Conecta o microfone à saída
    microphoneStream.connect(audioContext.destination);
    return true;
}

function getUserMedia_Error(error) {
    alert("Erro ao obter acesso ao microfone: " + error);
    return true;
}

//Valida a capacidade do browser de capturar mídia
if (!navigator.getUserMedia) {
    navigator.getUserMedia = (navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia);
}
if (!navigator.getUserMedia) {
    alert("Aparentemente seu browser não possui a API necessária para capturar mídia :(");
    return;
}

//Tenta criar o contexto de áudio para capturar e reproduzir o áudio
audioContext = (window.AudioContext ? new AudioContext() : (window.webkitAudioContext ? new webkitAudioContext() : null));
if (!audioContext) {
    alert("Aparentemente seu browser não possui a API necessária para trabalhar com áudio! :(");
} else {
    //Tenta obter acesso ao microfone
    navigator.getUserMedia({ audio: true }, getUserMedia_Success, getUserMedia_Error);
}

0

You can take a look at HTML Media Capture and its API.

Ericsson laboratories already achieved this, see: here (Note: Note that the device element and Apis are not available in any browser, however, and Apis can change before that happens. ) But he gives you an idea about how it’s done .

I’m currently working on something like this, see: here.

Source: https://stackoverflow.com/a/4238672/2191161

Browser other questions tagged javascript html5 html5-audio

You are not signed in. Login or sign up in order to post.