Запись аудиопотока от 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 :(
}
Источник

5 ответов

Решение

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

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

Источник

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. Вот демо.

Вот еще один замечательный ресурс.

Источник

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

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

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

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

Источник

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

Источник
Другие вопросы по тегам