HTML5 record audio to file

Question

What I ultimately want to do is record from the user s microphone  and upload the file to the server when they re done  So far  I ve managed to make a stream to an  element with the following code   var audio   document getElementById  audio preview     navigator getUserMedia    navigator getUserMedia    navigator webkitGetUserMedia    navigator mozGetUserMedia    navigator msGetUserMedia  navigator getUserMedia  video  false  audio  true   function stream       audio src   window URL createObjectURL stream      onRecordFail    var onRecordFail   function  e       console log e       How do I go from that  to recording to a file

User · Answer

This is a simple JavaScript sound recorder and editor  You can try it   https   www danieldemmel me JSSoundRecorder   Can download from here  https   github com daaain JSSoundRecorder

User · Answer

There is a fairly complete recording demo available at   http   webaudiodemos appspot com AudioRecorder index html  It allows you to record audio in the browser  then gives you the option to export and download what you ve recorded   You can view the source of that page to find links to the javascript  but to summarize  there s a Recorder object that contains an exportWAV method  and a forceDownload method

User · Answer

Here s a gitHub project that does just that   It records audio from the browser in mp3 format  and it automatically saves it to the webserver  https   github com Audior Recordmp3js  You can also view a detailed explanation of the implementation  http   audior ec blog recording-mp3-using-only-html5-and-javascript-recordmp3-js

User · Answer

Stream audio in realtime without waiting for recording to end  https   github com noamtcohen AudioStreamer  This streams PCM data but you could modify the code to stream mp3 or Speex

User · Answer

The code shown below is copyrighted to Matt Diamond and available for use under MIT license  The original files are here     http   webaudiodemos appspot com AudioRecorder index html http   webaudiodemos appspot com AudioRecorder js recorderjs recorderWorker js   Save this files and use x000D   x000D   function window   x000D   x000D        var WORKER PATH    recorderWorker js   x000D        var Recorder   function source  cfg   x000D          var config   cfg        x000D          var bufferLen   config bufferLen    4096  x000D          this context   source context  x000D          this node   this context createScriptProcessor bufferLen  2  2   x000D          var worker   new Worker config workerPath    WORKER PATH   x000D          worker postMessage   x000D            command   init   x000D            config    x000D              sampleRate  this context sampleRate x000D              x000D              x000D          var recording   false  x000D            currCallback  x000D   x000D          this node onaudioprocess   function e   x000D            if   recording  return  x000D            worker postMessage   x000D              command   record   x000D              buffer    x000D                e inputBuffer getChannelData 0   x000D                e inputBuffer getChannelData 1  x000D                x000D                x000D            x000D   x000D          this configure   function cfg   x000D            for  var prop in cfg   x000D              if  cfg hasOwnProperty prop    x000D                config prop    cfg prop   x000D                x000D              x000D            x000D   x000D          this record   function    x000D          x000D            recording   true  x000D            x000D   x000D          this stop   function    x000D           x000D            recording   false  x000D            x000D   x000D          this clear   function    x000D            worker postMessage   command   clear      x000D            x000D   x000D          this getBuffer   function cb    x000D            currCallback   cb    config callback  x000D            worker postMessage   command   getBuffer     x000D            x000D   x000D          this exportWAV   function cb  type   x000D            currCallback   cb    config callback  x000D            type   type    config type     audio wav   x000D            if   currCallback  throw new Error  Callback not set    x000D            worker postMessage   x000D              command   exportWAV   x000D              type  type x000D                x000D            x000D   x000D          worker onmessage   function e   x000D            var blob   e data  x000D            currCallback blob   x000D            x000D   x000D          source connect this node   x000D          this node connect this context destination        this should not be necessary x000D           x000D   x000D        Recorder forceDownload   function blob  filename   x000D          var url    window URL    window webkitURL  createObjectURL blob   x000D          var link   window document createElement  a    x000D          link href   url  x000D          link download   filename     output wav   x000D          var click   document createEvent  Event    x000D          click initEvent  click   true  true   x000D          link dispatchEvent click   x000D          x000D   x000D        window Recorder   Recorder  x000D   x000D         window   x000D   x000D        ADDITIONAL JS recorderWorker js x000D      var recLength   0  x000D        recBuffersL       x000D        recBuffersR       x000D        sampleRate  x000D      this onmessage   function e   x000D        switch e data command   x000D          case  init   x000D            init e data config   x000D            break  x000D          case  record   x000D            record e data buffer   x000D            break  x000D          case  exportWAV   x000D            exportWAV e data type   x000D            break  x000D          case  getBuffer   x000D            getBuffer    x000D            break  x000D          case  clear   x000D            clear    x000D            break  x000D          x000D         x000D   x000D      function init config   x000D        sampleRate   config sampleRate  x000D        x000D   x000D      function record inputBuffer   x000D   x000D        recBuffersL push inputBuffer 0    x000D        recBuffersR push inputBuffer 1    x000D        recLength    inputBuffer 0  length  x000D        x000D   x000D      function exportWAV type   x000D        var bufferL   mergeBuffers recBuffersL  recLength   x000D        var bufferR   mergeBuffers recBuffersR  recLength   x000D        var interleaved   interleave bufferL  bufferR   x000D        var dataview   encodeWAV interleaved   x000D        var audioBlob   new Blob  dataview     type  type     x000D   x000D        this postMessage audioBlob   x000D        x000D   x000D      function getBuffer     x000D        var buffers       x000D        buffers push  mergeBuffers recBuffersL  recLength     x000D        buffers push  mergeBuffers recBuffersR  recLength     x000D        this postMessage buffers   x000D        x000D   x000D      function clear    x000D        recLength   0  x000D        recBuffersL       x000D        recBuffersR       x000D        x000D   x000D      function mergeBuffers recBuffers  recLength   x000D        var result   new Float32Array recLength   x000D        var offset   0  x000D        for  var i   0  i  lt  recBuffers length  i     x000D          result set recBuffers i   offset   x000D          offset    recBuffers i  length  x000D          x000D        return result  x000D        x000D   x000D      function interleave inputL  inputR   x000D        var length   inputL length   inputR length  x000D        var result   new Float32Array length   x000D   x000D        var index   0  x000D          inputIndex   0  x000D   x000D        while  index  lt  length   x000D          result index      inputL inputIndex   x000D          result index      inputR inputIndex   x000D          inputIndex    x000D          x000D        return result  x000D        x000D   x000D      function floatTo16BitPCM output  offset  input   x000D        for  var i   0  i  lt  input length  i    offset  2   x000D          var s   Math max -1  Math min 1  input i     x000D          output setInt16 offset  s  lt  0   s   0x8000   s   0x7FFF  true   x000D          x000D        x000D   x000D      function writeString view  offset  string   x000D        for  var i   0  i  lt  string length  i     x000D          view setUint8 offset   i  string charCodeAt i    x000D          x000D        x000D   x000D      function encodeWAV samples   x000D        var buffer   new ArrayBuffer 44   samples length   2   x000D        var view   new DataView buffer   x000D   x000D           RIFF identifier    x000D        writeString view  0   RIFF    x000D           file length    x000D        view setUint32 4  32   samples length   2  true   x000D           RIFF type    x000D        writeString view  8   WAVE    x000D           format chunk identifier    x000D        writeString view  12   fmt     x000D           format chunk length    x000D        view setUint32 16  16  true   x000D           sample format  raw     x000D        view setUint16 20  1  true   x000D           channel count    x000D        view setUint16 22  2  true   x000D           sample rate    x000D        view setUint32 24  sampleRate  true   x000D           byte rate  sample rate   block align     x000D        view setUint32 28  sampleRate   4  true   x000D           block align  channel count   bytes per sample     x000D        view setUint16 32  4  true   x000D           bits per sample    x000D        view setUint16 34  16  true   x000D           data chunk identifier    x000D        writeString view  36   data    x000D           data chunk length    x000D        view setUint32 40  samples length   2  true   x000D   x000D        floatTo16BitPCM view  44  samples   x000D   x000D        return view  x000D        x000D   lt html gt  x000D        lt body gt  x000D         lt audio controls autoplay gt  lt  audio gt  x000D         lt script type  text javascript  src  recorder js  gt   lt  script gt  x000D                       lt fieldset gt  lt legend gt RECORD AUDIO lt  legend gt  x000D         lt input onclick  startRecording    type  button  value  start recording    gt  x000D         lt input onclick  stopRecording    type  button  value  stop recording and play    gt  x000D                       lt  fieldset gt  x000D         lt script gt  x000D         var onFail   function e    x000D          console log  Rejected    e   x000D            x000D   x000D         var onSuccess   function s    x000D          var context   new webkitAudioContext    x000D          var mediaStreamSource   context createMediaStreamSource s   x000D          recorder   new Recorder mediaStreamSource   x000D          recorder record    x000D   x000D             audio loopback x000D             mediaStreamSource connect context destination   x000D           x000D   x000D         window URL   window URL    window webkitURL  x000D         navigator getUserMedia    navigator getUserMedia    navigator webkitGetUserMedia    navigator mozGetUserMedia    navigator msGetUserMedia  x000D   x000D         var recorder  x000D         var audio   document querySelector  audio    x000D   x000D         function startRecording     x000D          if  navigator getUserMedia    x000D           navigator getUserMedia  audio  true   onSuccess  onFail   x000D            else   x000D           console log  navigator getUserMedia not present    x000D            x000D           x000D   x000D         function stopRecording     x000D          recorder stop    x000D          recorder exportWAV function s    x000D                                   x000D                                    audio src   window URL createObjectURL s   x000D              x000D           x000D         lt  script gt  x000D        lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

You can use Recordmp3js from GitHub to achieve your requirements  You can record from user s microphone and then get the file as an mp3  Finally upload it to your server     I used this in my demo  There is a already a sample available with the source code by the author in this location   https   github com Audior Recordmp3js  The demo is here  http   audior ec recordmp3js   But currently works only on Chrome and Firefox   Seems to work fine and pretty simple  Hope this helps

User · Answer

Update now Chrome also supports MediaRecorder API from v47  The same thing to do would be to use it  guessing native recording method is bound to be faster than work arounds   the API is really easy to use  and you would find tons of answers as to how to upload a blob for the server    Demo - would work in Chrome and Firefox  intentionally left out pushing blob to server     Code Source     Currently  there are three ways to do it      as wav  all code client-side  uncompressed recording   you can check out --  Recorderjs  Problem  file size is quite big  more upload bandwidth required  as mp3  all code client-side  compressed recording   you can check out --  mp3Recorder  Problem  personally  I find the quality bad  also there is this licensing issue  as ogg   client  server node js  code  compressed recording  infinite hours of recording without browser crash    you can check out --  recordOpus  either only client-side recording  or client-server bundling  the choice is yours    ogg recording example  only firefox     var mediaRecorder   new MediaRecorder stream   mediaRecorder start        to start recording          mediaRecorder stop         to stop recording  mediaRecorder ondataavailable   function e           do something with the data      Fiddle Demo for ogg recording

[javascript] HTML5 record audio to file

Examples related to javascript

Examples related to html

Examples related to html5-audio

Examples related to audio-recording