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

person Shih-En Chou    schedule 16.08.2012    source источник


Ответы (5)


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

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

person Mikael Holmgren    schedule 22.08.2013
comment
Обратите внимание, что ответы только по ссылкам не рекомендуются, ответы SO должны быть конечной точкой поиска. для решения (по сравнению с еще одной остановкой ссылок, которые со временем устаревают). Пожалуйста, рассмотрите возможность добавления здесь отдельного синопсиса, оставив ссылку в качестве ссылки. - person kleopatra; 22.08.2013
comment
Аудио не может быть воспроизведено с помощью проигрывателя Windows Media, если я записываю и загружаю его по ссылке выше. Если я использую проигрыватель Windows Media и записываю звук с помощью этой штуки, тогда его сломанный звук можно воспроизвести, если я загружу классический медиаплеер. Даже vlc не может воспроизвести этот звук - person Kramer; 30.01.2019

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

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

person jrullmann    schedule 08.10.2013
comment
ScriptProcessorNode больше не рекомендуется — developer.mozilla.org/en-US/docs /Web/API/ScriptProcessorNode - person Xdg; 16.10.2020

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

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

  1. as wav
  2. as mp3
  3. as opus packets (can get output as wav, mp3 or ogg)
person mido    schedule 25.03.2015

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

person Todd    schedule 30.08.2012

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

person Vidhuran    schedule 16.03.2013
comment
Вот система отслеживания ошибок для этой функции ссылка. - person Vidhuran; 27.05.2013