Запись аудиопотока из getUserMedia

в последние дни я пытался использовать javascript для записи аудиопотока. Я обнаружил, что нет примера кода, который работает.

есть ли поддержка браузера?

вот мой код

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia || navigator.msGetUserMedia; 

navigator.getUserMedia({ audio: true }, gotStream, null);
function gotStream(stream) {

        msgStream = stream;        
        msgStreamRecorder = stream.record(); // no method record :(
}
9
audio getusermedia html5 javascript webrtc

5 ответов

вы можете проверить этот сайт: https://webaudiodemos.appspot.com/AudioRecorder/index.html

Он сохраняет аудио в файл (.wav) на стороне клиента.

4

getUserMedia дает вам доступ к устройству, но это до вас, чтобы записать звук. Для этого вам нужно "прослушать" устройство, создав буфер данных. Затем, когда вы прекратите прослушивание устройства, вы можете отформатировать эти данные как WAV-файл (или любой другой формат). После форматирования вы можете загрузить его на свой сервер, S3, или играйте прямо в браузере.

чтобы прослушать данные таким образом, который полезен для создания буфера, вам понадобится ScriptProcessorNode. ScriptProcessorNode в основном сидит между входом (микрофон) и выходом (динамики), и дает вам возможность манипулировать звуковыми данными, как это потоки. К сожалению, реализация не понятна.

вам понадобится:

  • getUserMedia для доступа к устройству
  • AudioContext для создания MediaStreamAudioSourceNode и ScriptProcessorNode
  • MediaStreamAudioSourceNode для представления аудиопотока
  • ScriptProcessorNode чтобы получить доступ к потоковым аудиоданным через onaudioprocessevent. Событие предоставляет данные канала, с помощью которых вы будете создавать буфер.

собираем все вместе:

navigator.getUserMedia({audio: true},
  function(stream) {
    // create the MediaStreamAudioSourceNode
    var context = new AudioContext();
    var source = context.createMediaStreamSource(stream);
    var recLength = 0,
      recBuffersL = [],
      recBuffersR = [];

    // create a ScriptProcessorNode
    if(!context.createScriptProcessor){
       node = context.createJavaScriptNode(4096, 2, 2);
    } else {
       node = context.createScriptProcessor(4096, 2, 2);
    }

    // listen to the audio data, and record into the buffer
    node.onaudioprocess = function(e){
      recBuffersL.push(e.inputBuffer.getChannelData(0));
      recBuffersR.push(e.inputBuffer.getChannelData(1));
      recLength += e.inputBuffer.getChannelData(0).length;
    }

    // connect the ScriptProcessorNode with the input audio
    source.connect(node);
    // if the ScriptProcessorNode is not connected to an output the "onaudioprocess" event is not triggered in chrome
    node.connect(context.destination);
  },
  function(e) {
    // do something about errors
});

вместо того, чтобы создать все это самостоятельно, я предлагаю вам использовать AudioRecorder код, который является удивительным. Он также обрабатывает запись буфера в файл WAV. вот демо.

вот еще большой ресурс.

25

для браузеров, которые поддерживают API MediaRecorder, использовать его.

для старых браузеров, которые не поддерживают MediaRecorder API, есть три способа сделать это

  1. as wav
  2. as mp3
  3. as opus packets (смогите получить выход как wav, mp3 или ogg)
4

существует ошибка, которая в настоящее время не позволяет только аудио. Пожалуйста, смотрите http://code.google.com/p/chromium/issues/detail?id=112367

1

В настоящее время это невозможно без отправки данных на серверную сторону. Однако это вскоре станет возможным в браузере, если они начнут поддерживать MediaRecorder рабочий проект.

-1