Question

我在网页上编写了用于录制的测试代码，并且可以播放导出的wav文件，但是完全错误，只是一些无意义的声音，并且VLC中的持续时间不正确。请看看代码中是否有任何错误。

<html>

<head></head>

<body>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <button id='start'>Start</button>
  <button id='stop'>Stop</button>
  <button id='export'>Export</button>
  <script>
    var isRecording = false;
  var buf = [];
  var totalLen = 0;
  var channelNum = 1;
  var sampleRate = 48000;

  $('#start').click(function()
  {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
    window.URL = window.URL || window.webkitURL;

    var cxt = new AudioContext();
    isRecording = true;

    navigator.getUserMedia({audio:true}, function(stream){
      var streamNode = cxt.createMediaStreamSource(stream);
      var processNode = (cxt.createScriptProcessor || cxt.createJavaScriptNode).call(cxt, 1024 * 2, channelNum, channelNum);
      processNode.onaudioprocess = function(e){
        if(!isRecording) return;

        var f = e.inputBuffer;
        var cdata = f.getChannelData(channelNum -1);
        buf.push(cdata);
        totalLen += cdata.length;
      }; 
      streamNode.connect(processNode);
      processNode.connect(cxt.destination);

    }, function(){});
  });

  $('#stop').click(function(){
    isRecording = false;
  });

  $('#export').click(function(){
    var oneBuf = new Float32Array(totalLen);
    var offset = 0;
    for(var i=0;i<buf.length;++i){
      oneBuf.set(buf[i], offset);
      offset += buf[i].length;
    }

    var encodedBuf = encodeWAV(oneBuf);
    var blob = new Blob([encodedBuf], {type:'audio/wav'});
    console.log(encodedBuf);

    var url = URL.createObjectURL(blob);
    var hf = document.createElement('a');
    hf.download = '1.wav';
    hf.innerHTML = hf.download;
    hf.href = url;
    $('body').append(hf);
  });

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

    /* 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, channelNum, 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, channelNum * 2, 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);
    console.log('my samplerate:%d', sampleRate);
    return view;
  }

  function floatTo16BitPCM(view, offset, input) {
      for (var i = 0; i < input.length; i++, offset += 2) {
          var s = Math.max(-1, Math.min(1, input[i]));
          view.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));
      }
  }

  </script>
</body>

</html>

Answer 1

做了一些调查。我发现了问题。

var cdata = f.getChannelData(channelNum -1);
buf.push(cdata);

变量buf存储来自音频缓冲区的声音数据，但只存储缓冲区引用。缓冲区由低级代码不断更新。因此，buf存储存储相同缓冲区的数组。这就是为什么VLC发出的声音毫无意义的原因。

更改为以下后，代码正常工作：

var cdata = f.getChannelData(channelNum -1);
buf.push(cdata.slice());

但目前还不知道为什么VLC中的持续时间值不正确。

HTML5录制不起作用

1 个答案: