Как захватить аудио в javascript?

В настоящее время я использую getUserMedia(), который работает только с Firefox и Chrome, но он устарел и работает только на https (в Chrome). Есть ли другой/лучший способ получить речевой ввод в javascript, который работает на всех платформах?

например. как делают такие веб-сайты, как web.whatsapp.com app record audio? getUserMedia() предлагает первым пользователям разрешить запись звука, тогда как приложение Whatsapp не требует разрешения пользователя.

getUserMedia() В настоящее время я использую:

navigator.getUserMedia(
    {
        "audio": {
            "mandatory": {
                "googEchoCancellation": "false",
                "googAutoGainControl": "false",
                "googNoiseSuppression": "false",
                "googHighpassFilter": "false"
            },
            "optional": []
        },
    }, gotStream, function(e) {
        console.log(e);
    });

Ответы

Ответ 1

Для Chrome требуется использовать https, так как getUserMedia является мощным feature. Доступ к API не должен работать в небезопасных доменах, поскольку доступ к API может быть передан незащищенным субъектам. Firefox по-прежнему поддерживает getUserMedia более http.

Я использовал RecorderJS, и он хорошо служил моим целям. Вот пример кода. (источник)

function RecordAudio(stream, cfg) {

  var config = cfg || {};
  var bufferLen = config.bufferLen || 4096;
  var numChannels = config.numChannels || 2;
  this.context = stream.context;
  var recordBuffers = [];
  var recording = false;
  this.node = (this.context.createScriptProcessor ||
    this.context.createJavaScriptNode).call(this.context,
    bufferLen, numChannels, numChannels);

  stream.connect(this.node);
  this.node.connect(this.context.destination);

  this.node.onaudioprocess = function(e) {
    if (!recording) return;
    for (var i = 0; i < numChannels; i++) {
      if (!recordBuffers[i]) recordBuffers[i] = [];
      recordBuffers[i].push.apply(recordBuffers[i], e.inputBuffer.getChannelData(i));
    }
  }

  this.getData = function() {
    var tmp = recordBuffers;
    recordBuffers = [];
    return tmp; // returns an array of array containing data from various channels
  };

  this.start() = function() {
    recording = true;
  };

  this.stop() = function() {
    recording = false;
  };
}

Использование прост:

var recorder = new RecordAudio(userMedia);
recorder.start();
recorder.stop();
var recordedData = recorder.getData()

Изменить: вы также можете проверить этот ответ, если ничего не работает.

Ответ 2

Recorder JS делает легкую работу для вас. Он работает с узлами API веб-аудио.

Браузер Chrome и Firefox развился сейчас. Существует встроенный MediaRecoder API, который выполняет аудиозапись для вас.

navigator.mediaDevices.getUserMedia({audio:true})
    .then(stream => {
        rec = new MediaRecorder(stream);
        rec.ondataavailable = e => {
            audioChunks.push(e.data);
            if (rec.state == "inactive"){
               // Use blob to create a new Object URL and playback/download
            }
        }
    })
    .catch(e=>console.log(e));

Работа демонстрация

MediaRecoder поддержка начинается с

Поддержка Chrome: 47

Поддержка Firefox: 25.0

Ответ 3

getUserMedia() не устарел, устаревший использует его над http. Насколько я знаю, единственный браузер, который требует https для getUserMedia(), сейчас - это то, что я считаю правильным.

Если вы хотите ssl/tls для своего теста, вы можете использовать бесплатную версию CloudFlare.

Страница Whatsapp не предоставляет никаких функций записи, она просто позволяет вам запускать приложение.

Хорошая статья о getUserMedia

Полностью рабочий пример с использованием MediaRecorder