Preciso capturar áudio do microfone e gravar em arquivo. Enviar para servidor PHP. Como faço, nos exemplos que vi aqui, não notei como gravar os arquivos de som.
-
1Aqui tem um tutorial interessante (em inglês). Vou pegar os pontos principais e montar uma resposta, a menos que alguém faça isso primeiro... :P– mgibsonbrCommented 30/04/2014 às 23:00
-
Aqui tem outro: creativejs.com/2012/03/getting-started-with-getusermedia. Vai fundo @mgibsonbr, estou sem tempo...– bfavarettoCommented 30/04/2014 às 23:01
-
1Dica: coloque na pergunta os exemplos que você já testou. Isso evita que a gente sugira coisas que você já descartou.– brasofiloCommented 30/04/2014 às 23:06
-
1Aparentemente, ambos os tutoriais linkados cobrem apenas capturar áudio/video e mostrar em um elemento na própria página. Salvar é um pouco mais complicado... Antes de responder, uma dúvida: você pretende salvar isso no servidor, ou simplesmente enviar para outro usuário? (ex.: um fala no seu browser, o outro escuta em outro browser) A solução é bastante diferente pra um caso ou pro outro.– mgibsonbrCommented 30/04/2014 às 23:40
-
Pergunta relacionada (duplicata?): pt.stackoverflow.com/questions/11640/…– bfavarettoCommented 5/05/2014 às 20:58
2 Respostas
Isso pode ser feito através do Media Capture and Streams, quando suportado (O Firefox, Chrome e Opera dão suporte; o Internet Explorer, receio que ainda não).
Em primeiro lugar, procure pela função getUserMedia
(alguns browsers/versões do browser podem usar um nome um pouco diferente, mas a funcionalidade é a mesma):
var gum = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
Em seguida, você precisa da permissão do usuário para acessar seus dispositivos (microfone, mas também câmera ou outros):
function sucesso(localMediaStream) { ... }
function erro(e) { ... }
gum({ video:false, audio:true }, sucesso, erro);
Fonte: esse artigo (em inglês)
Se o usuário conceder essa permissão, você terá acesso a um objeto MediaStream
. Normalmente você associaria esse stream a um elemento <audio>
(para exibir de volta pro usuário) ou usaria WebRTC para enviar o áudio a um outro usuário (como um telefone), mas nesse caso, o que você quer é gravar no servidor, certo?
Uma opção é usar a biblioteca Recorder.js. Vou mostrar como enviar a gravação ao servidor no formato WAV
, com base nesse exemplo da própria biblioteca e nessa resposta no SOen:
var recorder = null;
var AC = window.AudioContext || window.webkitAudioContext;
var audio_context = new AC();
function sucesso(localMediaStream) {
var input = audio_context.createMediaStreamSource(localMediaStream);
input.connect(audio_context.destination);
recorder = new Recorder(input);
recorder.record();
}
// Quando quiser parar de gravar e enviar; associe essa função a um botão, por exemplo
function enviar() {
recorder.stop();
recorder.exportWAV(function (blob) {
// Envia ao servidor usando Ajax (assíncrono)
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload.php', true);
xhr.send(blob);
});
}
Não tenho como testar essa solução nesse momento (1. meu computador não tem microfone; 2. precisaria testar o recebimento no lado do servidor), mas assim que puder montar um exemplo concreto posto aqui.
P.S. Acredito que o Internet Explorer ofereça uma maneira alternativa de fazer isso (sei que eles têm suas funcionalidades proprietárias), mas não conheço nenhuma.
-
Alternativa sem o uso de bibliotecas externas. Vou avaliá-la, se for o caso atualizo a resposta. Commented 1/05/2014 às 0:31
-
Cara vc encadeou as funções usando || !!!! Muito legal sua ideia, um pequeno ajuste que eu sugeria é que voce tem que especificar o contexto da funcao gum que é o navigator né... getUserMediaFunc = gum.bind(navigator); mas parabens pela solução! Commented 7/12/2023 às 19:01
Estou usando estes abaixo, porém não consigo pausar, grava somente WAV (tamanho de arquivo mto grande) e nem sempre abre o Microfone da máquina.
<html>
<head>
<meta name='author' content='Sajith Amma' />
<script src='jquery.min.js'> </script>
<script src='jRecorder.js'> </script>
<!--<title>jRecorder Example</title> -->
<style>
li {display:inline; margin-right:10px;}
</style>
</head>
<body>
<script>
$.jRecorder({
host : 'http://eficazlaudos.com/laudo_voz/acceptfile.php?filename=".$row2['id_lista_trab'].".wav&id_lanca=h71' , //replace with your server path please
callback_started_recording: function(){callback_started(); },
callback_stopped_recording: function(){callback_stopped(); },
callback_activityLevel: function(level){callback_activityLevel(level); },
callback_activityTime: function(time){callback_activityTime(time); },
callback_finished_sending: function(time){ callback_finished_sending() },
swf_path : 'jRecorder.swf',
});
</script>
</div>
<div style='background-color: #eeeeee;border:1px solid #cccccc'>
Time: <span id='time'>00:00</span>
</div>
<div>
Level: <span id='level'></span>
</div>
<div id='levelbase' style='width:200px;height:20px;background-color:#ffff00'>
<div id='levelbar' style='height:19px; width:2px;background-color:red'>
</div>
</div>
<div>
Status: <span id='status'></status>
</div>
<div>
<input type='button' id='record' value='Gravar' style='color:red'>
<!--
<p>
This Record button trigger the record event. See the javascript example in the bottom of the page. (View Source in your browser).
<pre>
$('#record').click(function() {
$.jRecorder.record(30); //record up to 30 sec and stops automatically
});
</pre>
</p>
<hr/>
-->
<input type='button' id='stop' value='Parar'>
<!--
<p>
This Stop button trigger the stop record event.
<pre>
Onclick of this button trigger $.jRecorder.sendData() which send the data to the Server
</pre>
</p>
<hr/>
-->
<input type='button' id='send' value='Enviar voz'>
<!--
<p>This SendData button trigger the sendData event to flash to send the wav data to Server (configured in the host parameter).
<hr/>
<pre>
$('#stop').click(function(){
$.jRecorder.stop();
});
</pre>
</p>
<hr/>
-->
</div>
<!--
<p>
Time area is used to update the time. There is an event Listener which update the recording time dynamically.
<pre>
callback_activityTime: function(time){callback_activityTime(time); //see the initialisation
//function callback
function callback_activityTime(time) {
$('#time').html(time);
}
</pre>
</p>
-->
</body>
</html>
<script type='text/javascript'>
$('#record').click(function(){
$.jRecorder.record(30);
});
$('#stop').click(function(){
$.jRecorder.stop();
});
$('#send').click(function() {
$.jRecorder.sendData();
});
function callback_finished() {
$('#status').html('Recording is finished');
}
function callback_started() {
$('#status').html('Recording is started');
}
function callback_error(code) {
$('#status').html('Error, code:' + code);
}
function callback_stopped() {
$('#status').html('Stop request is accepted');
}
function callback_finished_recording() {
$('#status').html('Recording event is finished');
}
function callback_finished_sending() {
$('#status').html('File has been sent to server mentioned as host parameter');
}
function callback_activityLevel(level) {
$('#level').html(level);
if(level == -1) {
$('#levelbar').css('width', '2px');
} else {
$('#levelbar').css('width', (level * 2)+ 'px');
}
}
function callback_activityTime(time) {
//$('.flrecorder').css('width', '1px');
//$('.flrecorder').css('height', '1px');
$('#time').html(time);
}
</script>