如何在javascript中捕获音频?

时间:2016-01-15 21:58:44

标签: javascript audio speech getusermedia voice-recording

我目前正在使用getUserMedia(),它仅适用于Firefox和Chrome,但已被弃用,仅适用于https(在Chrome中)。有没有其他/更好的方法来获得适用于所有平台的javascript中的语音输入?

E.g。 web.whatsapp.com app等网站如何录制音频? getUserMedia()提示首次用户允许录音,而Whatsapp应用程序不需要用户的许可。

我目前使用的getUserMedia()如下所示:

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

3 个答案:

答案 0 :(得分:28)

Chrome 60+具有require using https,因为getUserMedia是强大的feature。 API访问不应该在非安全域中工作,因为该API访问可能会流失到非安全的actor。不过,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()

编辑:如果无效,您可能还想查看此answer

答案 1 :(得分:16)

Recorder JS为您轻松完成工作。它适用于Web Audio 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));

工作demo

MediaRecoder支持从

开始

Chrome支持:47

Firefox支持:25.0

答案 2 :(得分:2)

不推荐使用getUserMedia(),不推荐使用httphttps。我知道目前唯一需要getUserMedia() ssl/tls的浏览器是Chrome,我觉得这是正确的做法。

如果您想要private void galleryAddPic() { Intent mediaScanIntent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE); File f = new File(mCurrentPhotoPath); Uri contentUri = Uri.fromFile(f); mediaScanIntent.setData(contentUri); this.sendBroadcast(mediaScanIntent); } 进行测试,可以使用CloudFlare的免费版本。

Whatsapp页面不提供任何录制功能,只允许您启动应用程序。

Good article about getUserMedia

Fully working example with use of MediaRecorder