Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

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 SOennessa 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.

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.

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.

Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

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.