我需要在90秒后自动停止录制音频

时间:2015-03-01 20:28:02

标签: audio recording

我正在使用此网站https://subinsb.com/html5-record-mic-voice的jquery插件,我在90秒后制作录音时遇到问题 这是代码,我在JS方面不是很好,所以感谢所有帮助的人



var recLength = 0,
  recBuffersL = [],
  recBuffersR = [],
  sampleRate;

this.onmessage = function(e) {
  switch (e.data.command) {
    case 'init':
      init(e.data.config);
      break;
    case 'record':
      record(e.data.buffer);
      break;
    case 'exportWAV':
      exportWAV(e.data.type);
      break;
    case 'getBuffer':
      getBuffer();
      break;
    case 'clear':
      clear();
      break;
  }
};

function init(config) {
  sampleRate = config.sampleRate;
}

function record(inputBuffer) {
  recBuffersL.push(inputBuffer[0]);
  recBuffersR.push(inputBuffer[1]);
  recLength += inputBuffer[0].length;
}

function exportWAV(type) {
  var bufferL = mergeBuffers(recBuffersL, recLength);
  var bufferR = mergeBuffers(recBuffersR, recLength);
  var interleaved = interleave(bufferL, bufferR);
  var dataview = encodeWAV(interleaved);
  var audioBlob = new Blob([dataview], {
    type: type
  });

  this.postMessage(audioBlob);
}

function getBuffer() {
  var buffers = [];
  buffers.push(mergeBuffers(recBuffersL, recLength));
  buffers.push(mergeBuffers(recBuffersR, recLength));
  this.postMessage(buffers);
}

function clear() {
  recLength = 0;
  recBuffersL = [];
  recBuffersR = [];
}

function mergeBuffers(recBuffers, recLength) {
  var result = new Float32Array(recLength);
  var offset = 0;
  for (var i = 0; i < recBuffers.length; i++) {
    result.set(recBuffers[i], offset);
    offset += recBuffers[i].length;
  }
  return result;
}

function interleave(inputL, inputR) {
  var length = inputL.length + inputR.length;
  var result = new Float32Array(length);

  var index = 0,
    inputIndex = 0;

  while (index < length) {
    result[index++] = inputL[inputIndex];
    result[index++] = inputR[inputIndex];
    inputIndex++;
  }
  return result;
}

function floatTo16BitPCM(output, offset, input) {
  for (var i = 0; i < input.length; i++, offset += 2) {
    var s = Math.max(-1, Math.min(1, input[i]));
    output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
  }
}

function writeString(view, offset, string) {
  for (var i = 0; i < string.length; i++) {
    view.setUint8(offset + i, string.charCodeAt(i));
  }
}

function encodeWAV(samples) {
  var buffer = new ArrayBuffer(44 + samples.length * 2);
  var view = new DataView(buffer);

  /* RIFF identifier */
  writeString(view, 0, 'RIFF');
  /* RIFF chunk length */
  view.setUint32(4, 36 + samples.length * 2, true);
  /* RIFF type */
  writeString(view, 8, 'WAVE');
  /* format chunk identifier */
  writeString(view, 12, 'fmt ');
  /* format chunk length */
  view.setUint32(16, 16, true);
  /* sample format (raw) */
  view.setUint16(20, 1, true);
  /* channel count */
  view.setUint16(22, 2, true);
  /* sample rate */
  view.setUint32(24, sampleRate, true);
  /* byte rate (sample rate * block align) */
  view.setUint32(28, sampleRate * 4, true);
  /* block align (channel count * bytes per sample) */
  view.setUint16(32, 4, true);
  /* bits per sample */
  view.setUint16(34, 16, true);
  /* data chunk identifier */
  writeString(view, 36, 'data');
  /* data chunk length */
  view.setUint32(40, samples.length * 2, true);

  floatTo16BitPCM(view, 44, samples);

  return view;
}






//------I guess problem is below--------------------------------------------

function restore() {
  $("#record,#live").removeClass("disabled");
  $(".one").addClass("disabled");
  $.voice.stop();
}
$(document).ready(function() {
  $(document).on("click", "#record:not(.disabled)", function() {
    $("#ex1").css({
      opacity: 1
    });
    $("#prepare").animate({
      backgroundPosition: '0px,0px,0px,0px'
    }, 1000).queue(function() {
      $("#rec-progress").animate({
        backgroundPosition: '0px,0px,0px,0px'
      }, 5000);
      /*I need to stop recording somewere here, I tried put .delay(30000).stop, 
      and things like that, but there were wrong ideas*/

      elem = $(this);
      $.voice.record($("#live").is(":checked"), function() {
        elem.addClass("disabled");
        $("#live").addClass("disabled");
        $("#stop,#play,#download").removeClass("disabled");


      });
    });
  });




  $(document).on("click", "#stop:not(.disabled)", function() {
    restore();
  });
  $(document).on("click", "#play:not(.disabled)", function() {
    $.voice.export(function(url) {
      $("#audio").attr("src", url);
      $("#audio")[0].play();
    }, "URL");
    restore();
  });
  $(document).on("click", "#download:not(.disabled)", function() {
    $.voice.export(function(url) {
      $("<a href='" + url + "' download='MyRecording.wav'></a>")[0].click();
    }, "URL");
    restore();
  });
});
&#13;
* {
  margin 0px;
  padding: 0px;
}
h2 {
  font-family: Tahoma, arial;
  font-size: 2em;
  width: 500px;
  display: block;
  margin-left: 50%;
  left: -250px;
  position: relative;
  text-align: center;
}
body {
  background: grey;
}
#progress-bar {
  height: 100px;
  width: 00px;
  margin-left: 50%;
  z-index: 10;
  left: -350px;
  position: relative;
}
#prepare {
  background: url(https://disk.yandex.ru/preview/?id=/disk/bar.png&size=800x);
  z-index: -10;
  overflow: hidden;
  height: 100px;
  background-position: -610px, 0px, 0px, 0px;
  background-repeat: no-repeat;
  width: 700px;
  position: absolute;
  top: 0px
}
#rec-progress {
  background: url(https://disk.yandex.ru/preview/?id=/disk/rec.png&size=800x);
  z-index: -5;
  overflow: hidden;
  height: 100px;
  background-position: -610px, 0px, 0px, 0px;
  background-repeat: no-repeat;
  width: 700px;
  position: absolute;
  top: 0px
}
#interface {
  width: 596px;
  height: 100px;
  margin-left: 50%;
  left: -315px;
  position: relative;
}
#content {
  height: 1000px;
}
#ex1 {
  background: url(ex1/type1.bmp);
  width: 100%;
  min-width: 1340px;
  min-height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}
.button {
  width: 120px;
  display: inline-block;
  vertical-align: middle;
  margin: 0px auto;
  padding: 5px 12px;
  cursor: pointer;
  outline: none;
  font-size: 13px;
  text-decoration: none !important;
  text-align: center;
  color: #fff;
  background-color: #4D90FE;
  background-image: linear-gradient(top, #4D90FE, #4787ED);
  background-image: -ms-linear-gradient(top, #4D90FE, #4787ED);
  background-image: -o-linear-gradient(top, #4D90FE, #4787ED);
  background-image: linear-gradient(top, #4D90FE, #4787ED);
  border: 1px solid #4787ED;
  box-shadow: 0 1px 3px #BFBFBF;
}
a.button {
  color: #fff;
}
.button:hover {
  box-shadow: inset 0px 1px 1px #8C8C8C;
}
.button.disabled {
  box-shadow: none;
  opacity: 0.7;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="http://lab.subinsb.com/projects/jquery/core/jquery-2.1.1.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="cdn/recorder.js"></script>
  <script src="http://lab.subinsb.com/projects/jquery/voice/jquery.voice.min.js"></script>
  <link rel="stylesheet" type="text/css" href="cdn/main.css">
  <script src="cdn/jquery.backgroundpos.min.js"></script>
  <script src="cdn/record.js"></script>

  <style src="cdn/main.css"></style>
  <title>Title</title>
</head>

<body>
  <div id="content">
    <h2>Example</h2>

    <div id="progress-bar">
      <img src="https://disk.yandex.ru/preview/?id=/disk/progress.png&size=800x">
      <div id="rec-progress"></div>
      <div id="prepare"></div>
    </div>
    <div id="interface">
      <a class="button" id="record">Start</a>
      <a class="button disabled one" id="stop">restart</a>
      <a class="button disabled one" id="play">listen</a>
      <a class="button disabled one" id="download">save</a> 
    </div>
    <div id="ex1"></div>


  </div>
  <audio controls src="" id="audio"></audio>
</body>

</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案