html - How to record audio from Audio Element using javascript - Stack Overflow

admin管理员组

文章数量:1426810

I am making an audio recorder using HTML5 and Javascript and do not want to include any third party API, I reached at my first step by creating an audio retriever and player using <audio> tag and navigator.webkitGetUserMedia Function which get audio from my microphone and play in through <audio> element but I am not able to get the audio data in an array at this point I don't know what to do which function to use.

I am making an audio recorder using HTML5 and Javascript and do not want to include any third party API, I reached at my first step by creating an audio retriever and player using <audio> tag and navigator.webkitGetUserMedia Function which get audio from my microphone and play in through <audio> element but I am not able to get the audio data in an array at this point I don't know what to do which function to use.

• javascript
• html
• audio
• audio-recording
• getusermedia

Share Improve this question Follow asked Jun 18, 2015 at 8:13 Abhinav ShrivastavaAbhinav Shrivastava 10322 silver badges1010 bronze badges 3

• wav or ogg, the choice is yours – mido Commented Jun 18, 2015 at 8:19
• No, my question is how to store the audio values in an array without any thrid party API. – Abhinav Shrivastava Commented Jun 18, 2015 at 8:20
• you can view the source of recorder.js to see how they do it. github./mattdiamond/Recorderjs/blob/master/recorder.js#L28 – dandavis Commented Jun 18, 2015 at 8:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

simple just create a audio node, below is tweaked code from MattDiamond's 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;
    };

}

example usage:

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

本文标签： htmlHow to record audio from Audio Element using javascriptStack Overflow