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

Question

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

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

The getUserMedia() настоящее время я использую выглядит следующим образом:

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

Answer 1

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

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

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() 

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

Answer 2

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

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

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

Good article about getUserMedia

Fully working example with use of MediaRecorder

Answer 3

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

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

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)); 

Рабочие demo

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

поддержки Chrome: 47

Firefox поддержки: 25,0