录音javascript

Dan*_*n W 6 html javascript jquery html5

可能是在Jquery或Javascript中,没有使用库来录制X秒的音频并保存到音频文件中.我看过getUserMedia,我发现它可以从网络摄像头中检索音频和视频.我目前正在使用带有另一个库的网络摄像头:Clmtracker,因此我想尝试在没有任何外部库的情况下执行此操作.

我想将录制的音频存储在div中.我正在拍照并为其分配一个唯一的名称,所以我想知道如何捕获一小段音频并将其存储在同一个生成的div中.

问题:如何从网络摄像头获取5秒钟的音频?子问题:如何将其存储在div中的元素中?

我的代码用于在我的页面上捕获Img和数据

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



      }
  }
Run Code Online (Sandbox Code Playgroud)

Jac*_*des 6

你可以看到Recorder.js的代码作为一个例子来实现捕获音频功能,并使用getUserMedia和wbit格式将其保存为wav格式,只需要html5和javascript.

现在你可能会说你没有任何插件就问过.事实上,我检查了recorder.js的代码,它只有90行简单的javascript,只有html5和javascript.

更新:我发现了一个在线演示实验,它似乎工作正常,所有源代码都是开放的.你可能想检查一下.这是链接: 记录器JS

这是另一个调整它并使其更具功能性的链接. 仅使用HTML5和JavaScript录制MP3