相关疑难解决方法(0)

要求的知识

如何缩短（从前面）一组音频 blob 并仍然具有可播放的音频。

目标

我最终尝试使用 JS MediaRecorder API录制连续 45 秒的音频循环。用户将能够按下按钮，最后 45 秒的音频将被保存。我可以很好地录制、播放和下载单个录音。

问题

当我有一个chunks来自 MediaRecorder的数组称为1000 个 blob 并使用chunks.slice(500, 1000)生成的 blob 数组时，不能用于播放或下载音频。

奇怪的是chunks.slice(0,500)仍然可以正常工作。

代码

let chunks = [];

navigator.mediaDevices.getUserMedia({ audio: true })
  .then((stream) => {
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
  }

// At some later time, attempt to trim
const trimmedAudio = chunks.slice(500, 1000)
const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
const audioURL = URL.createObjectURL(blob); …

我已经看过这个问题了-

串联两个或多个WebM视频Blob的部分

并在此处尝试了示例代码-https : //developer.mozilla.org/en-US/docs/Web/API/MediaSource-（无修改），希望将blob转换为arraybuffers并将它们附加到MediaSource WebAPI，但即使示例代码也无法在我认为兼容的Chrome浏览器上运行。

我的问题的症结在于，第一次播放后，我无法将多个Blob Webm剪辑合并成一个没有正确播放的剪辑。要直接解决该问题，请滚动至前两个代码块之后的行，以使背景继续阅读。

我正在设计一个Web应用程序，允许演示者记录他/她自己的场景并解释图表和视频。

我正在使用MediaRecorder WebAPI在chrome / firefox上录制视频。（旁边的问题-除通过Flash之外，我还可以通过网络摄像头和麦克风录制视频/音频吗？因为非Chrome / Firefox用户代理不支持MediaRecorder）。

navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMedia)
    .catch(e => { console.error('getUserMedia() failed: ' + e); });

function gotMedia(stream) {
    recording = true;
    theStream = stream;
    vid.src = URL.createObjectURL(theStream);
    try {
        recorder = new MediaRecorder(stream);
    } catch (e) {
        console.error('Exception while creating MediaRecorder: ' + e);
        return;
    }

    theRecorder = recorder;
    recorder.ondataavailable = 
        (event) => {
            tempScene.push(event.data);
        };

    theRecorder.start(100);
}

function finishRecording() {
    recording = false;
    theRecorder.stop();
    theStream.getTracks().forEach(track => { …