时间戳

首页 > 解决方案 > 如何用新录制的音频覆盖部分网络音频？

javascript - 如何用新录制的音频覆盖部分网络音频？

问题描述

我正在成功录制音频、存储音频并将其重新加载到Audio对象中以便在浏览器中播放。

但是，我希望能够在某个时间偏移处录制新音频并将其“拼接”到原始录音中，从而完全替换从该偏移开始的原始录音的那部分。例如，假设我从麦克风录制了 10 秒的音频，然后，我希望用 8 秒的全新音频“录制”该音频的最后 5 秒，最终得到一个我可以保留的新 bufferArray。我已经花了几个小时研究这个，但仍然很模糊如何做到这一点。如果有人有任何建议，我将不胜感激。

我能找到的最接近的例子涉及获取两个缓冲区并尝试将它们连接起来，就像在这个 fiddle中一样。但是，我在将这个小提琴与我的代码以及我需要做的事情联系起来时遇到了一些困难。某些帖子提到我需要知道采样率，创建具有相同采样率的新缓冲区，并将数据从两个缓冲区复制到新缓冲区中。但是关于这种技术的工作示例很少，我正在努力从 MDN 文档中弄清楚这一点。

这是我现在正在工作的代码。

const saveRecordedAudio = (e) => {
  console.log("Audio data available", e.data);
  const reader = new FileReader();
  reader.addEventListener("loadend", function() {
    // reader.result contains the contents of blob as a typed array
    let bufferArray = reader.result;
    // From: https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string
    let base64String = btoa([].reduce.call(new Uint8Array(bufferArray),function(p,c){return p+String.fromCharCode(c)},''));
    // persist base64-encoded audio data on filesystem here.
    storeRecordedAudio(base64String); // defined elsewhere and not shown here for brevity's sake
  });
  reader.readAsArrayBuffer(e.data);

  const audioUrl = window.URL.createObjectURL(e.data);
  // Put the recorded audio data into the browser for playback.
  // From: http://stackoverflow.com/questions/33755524/how-to-load-audio-completely-before-playing (first answer)
  const audioObj = new Audio (audioUrl);
  audioObj.load();

};

const recordAudio = () => {
  navigator.getUserMedia = ( navigator.getUserMedia ||
                             navigator.webkitGetUserMedia ||
                             navigator.mozGetUserMedia ||
                             navigator.msGetUserMedia);
  if (navigator.getUserMedia) {
    navigator.getUserMedia (
      { // constraints - only audio needed for this app
        audio: true
      },
      // Success callback
      function(stream) {
        const mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.ondataavailable = audio.saveRecordedAudio;
      }),
      // fail callback
      function(err) {
        console.log('Could not record.');
      }
   );
  }
};


// I've already fetched a previously recorded audio buffer encoded as
// a base64 string, so place it into an Audio object for playback
const setRecordedAudio => (b64string) => {
  const labeledAudio = 'data:video/webm;base64,' + b64String;
  const audioObj = new Audio(labeledAudio);
  audioObj.load();
};

标签： javascriptwebaudiohtml5-audioweb-audio-api

解决方案

如果我得到你想要做的正确的事情，这是我处理这个问题的方法：

1-我们应该声明一个blob数组并在其中存储数据：

var chuncks = [];

2-我们需要知道记录的秒数：

我们应该使用带时间片参数的start(1000)方法来限制每个 blob 中的毫秒数，在这种情况下，我们知道每个数据块大约 1 秒长（ chunks.length = 记录的秒数). 并用数据填充块数组，ondataavailable事件处理程序是我们的朋友：

mediaRecorder.ondataavailable = function( event ) {
    chunks.push( event.data );
}

现在，我们必须处理简单的数组而不是缓冲区数组：-D（在您的示例中，我们应该删除或覆盖最后 5 个项目并继续向其中添加 blob）

3-最后，当我们的录音准备好时（块数组）：

我们应该使用Blob构造函数将所有内容连接在一起：

new Blob(chunks, {'type' : 'audio/webm;codecs=opus'});

我希望这会有所帮助:-D

推荐阅读