web-dev-qa-db-fra.com

Comment capturer de l'audio en javascript?

J'utilise actuellement getUserMedia(), qui ne fonctionne que sur Firefox et Chrome, mais il est devenu obsolète et ne fonctionne que sur https (dans Chrome). Existe-t-il un autre/meilleur moyen d'obtenir l'entrée vocale en javascript qui fonctionne sur toutes les plateformes?

Par exemple. comment les sites Web comme l'application web.whatsapp.com enregistrent-ils le son? getUserMedia() invite les nouveaux utilisateurs à autoriser l'enregistrement audio, tandis que l'application Whatsapp ne nécessite pas l'autorisation de l'utilisateur.

La getUserMedia() que j'utilise actuellement ressemble à ceci:

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

Chrome 60+ fait nécessite l'utilisation de https , puisque getUserMedia est un puissant fonctionnalité =. L'accès à l'API ne doit pas fonctionner dans les domaines non sécurisés, car cet accès API peut être transféré aux acteurs non sécurisés. Firefox prend toujours en charge getUserMedia sur http , cependant.

J'utilise RecorderJS et cela a bien fonctionné. Voici un exemple de code. ( 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;
  };
}

L'utilisation est simple:

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

Edit: Vous pouvez également vérifier cela réponse si rien ne fonctionne.

28
George Netu

Recorder JS fait le travail facile pour vous. Il fonctionne avec les nœuds de l'API Web Audio

Les navigateurs Chrome et Firefox ont évolué maintenant. Il existe une API MediaRecoder intégrée qui effectue l'enregistrement audio pour vous.

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

Fonctionnement démo

MediaRecoder le support commence à partir de

Prise en charge de Chrome: 47

Prise en charge de Firefox: 25,0

17
Sasi Varunan

La getUserMedia() n'est pas obsolète, obsolète l'utilise sur http. Jusqu'à présent, je connais le seul navigateur qui nécessite https pour getUserMedia() en ce moment Chrome ce que je pense être une approche correcte.

Si tu veux ssl/tls pour votre test, vous pouvez utiliser la version gratuite de CloudFlare.

La page Whatsapp ne fournit aucune fonction d'enregistrement, elle vous permet simplement de lancer l'application.

Bon article sur getUserMedia

Exemple de fonctionnement complet avec utilisation de MediaRecorder

2
LJ Wadowski