Audio recording javascript

Question

Is it possibly in Jquery or Javascript, without the use of libraries to record audio for X seconds and save to a audio file. I've looked at getUserMedia, an I see that it can retrieve audio and video from the webcam. I am currently using the webcam with another library: Clmtracker and for that reason I would want to try and do this without any more external libraries.

I want to store the recorded audio in a div. I am currently taking a picture and assigning it a unique name, so I am wondering how I can capture a short section of audio and store it in the same generated div.

Question: How can I achieve getting audio for 5 seconds from webcam? Sub-Question: How can I store that in an element within a div?

My Code for capturing Img and Data on my page

   function capturePage() {
      var now = new Date();

      if (nextAllowedCapture <= now) {
          // Do capture logic
          audioElement.play();

          counting++
          console.log("Capturing...");
          $(".capturing").show().delay(500).fadeOut(3000);
          var innerDiv = document.createElement('div'),
              innerDivImg = document.createElement('canvas'),
              image = document.createElement('img'),
              ul = document.createElement('ul');

          innerDiv.className = 'divCreate';

          innerDiv.id = 'img' + counting;

          innerDivImg.height = 450;
          innerDivImg.width = 600;
          innerDivImg.getContext('2d').drawImage(vid, 0, 0);

          image.id = 'image' + counting;
          image.src = innerDivImg.toDataURL();
          image.className = 'divCreateImg';

          innerDiv.appendChild(image);
          innerDiv.appendChild(ul);

          document.getElementById('galleryWrapper').appendChild(innerDiv);


          $('#measurements h4').each(function () {
              $("#" + innerDiv.id + " " + 'ul').append('<li>' + $(this).text() + ': ' + $(this).next().text());
          });
          nextAllowedCapture = new Date();
          nextAllowedCapture.setSeconds(nextAllowedCapture.getSeconds() + coolDownSeconds);
      } else {

          nextCapTime = (nextAllowedCapture.getTime() - now.getTime()) / 1000;
          console.log("Can't capture again yet. This function can be executed again in " +
              (nextAllowedCapture.getTime() - now.getTime()) / 1000 +
              " seconds.");



      }
  }

Jack_of_All_Trades · Accepted Answer · 2014-06-04 18:17:48Z

6

You can see the code for Recorder.js as an example which implements the capture audio functionality and saves it in wav format using getUserMedia annd yes, just html5 and javascript.

Now you might say that you asked without any plugins. In fact, I checked the code for recorder.js which is just 90 lines of plain javascript, just html5 and javascript.

UPDATE: I found one online demo which experiments with this and it seems to work fine and all source code is open. You might want to check that out. Here is the link: Recorder JS

Here is another link to tweak it and make it more functional. Recording MP3 Using Only HTML5 and JavaScript

edited Jun 4, 2014 at 18:17

answered May 29, 2014 at 20:37

Jack_of_All_Trades

11.6k20 gold badges64 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

dandavis Over a year ago

i played with those the other day and they aren't ready for prime time yet. specifically, you have to mute the device audio to record or else suffer horrible feedback, and the resulting mp3 from that blog post is twice as long as the input wav. it's also a chrome/FF only thing for now. i hope something better comes along. the two links are promising and neat, but not quite usable at this time.

Jack_of_All_Trades Over a year ago

Yes, I realized that too when I started reading about it. Seems to have some buffer issues but hey, it is possible. Only thing that is remaining is to make it more efficient. Need to do more reading myself though.

dandavis Over a year ago

this is one of those HTML5 "are we there yet?"s that's taken so long i want to turn around and go home.

Dan W Over a year ago

Can you tell me is this example working for you, actually looks fairly promising but it doesnt seem to work for me in Chrome audior.ec/recordmp3js

dandavis Over a year ago

@DanW: works with the limits i described earlier (double length and feedback if the device volume is any louder than a whisper). that said, the mp3s are MUCH smaller than the wave output, so even double (evidently without fancy zero-bit silence) is still a lot better to store client-side. if you can live with that and a muted audio on the recording device, this does what advertised.

|

Collectives™ on Stack Overflow

Audio recording javascript

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related