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.");



      }
  }

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.");



      }
  }

• javascript
• jquery
• html

1 Answer 1

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