如何使用 javascript 从 Audio Element 录制音频

Posted 2023-02-25

【中文标题】如何使用 javascript 从 Audio Element 录制音频

【英文标题】：How to record audio from Audio Element using javascript

【发布时间】：2015-06-18 08:13:52

【问题描述】：

我正在使用 html5 和 javascript 制作录音机，并且不想包含任何第三方 API，我首先通过使用 <audio> 标签和 navigator.webkitGetUserMedia 获取音频的函数创建音频检索器和播放器来实现来自我的麦克风并通过<audio> 元素播放，但此时我无法获取数组中的音频数据，我不知道要使用哪个功能。

【问题讨论】：

wav 或 ogg，任你选择

不，我的问题是如何在没有任何第三方 API 的情况下将音频值存储在数组中。

你可以查看recorder.js的源码，看看他们是怎么做的。 github.com/mattdiamond/Recorderjs/blob/master/recorder.js#L28

【参考方案1】：

只需创建一个音频节点，下面是来自 MattDiamond 的 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();