8

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.

6
  • 1
    Aqui 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
    – mgibsonbr
    Commented 30/04/2014 às 23:00
  • Aqui tem outro: creativejs.com/2012/03/getting-started-with-getusermedia. Vai fundo @mgibsonbr, estou sem tempo...
    – bfavaretto
    Commented 30/04/2014 às 23:01
  • 1
    Dica: coloque na pergunta os exemplos que você já testou. Isso evita que a gente sugira coisas que você já descartou.
    – brasofilo
    Commented 30/04/2014 às 23:06
  • 1
    Aparentemente, 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.
    – mgibsonbr
    Commented 30/04/2014 às 23:40
  • Pergunta relacionada (duplicata?): pt.stackoverflow.com/questions/11640/…
    – bfavaretto
    Commented 5/05/2014 às 20:58

2 Respostas 2

5

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.

2
  • Alternativa sem o uso de bibliotecas externas. Vou avaliá-la, se for o caso atualizo a resposta.
    – mgibsonbr
    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
0

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .