JavaScript中的录音问题某些录音丢失

Question

大家好，我正在尝试录制音频，然后在录制之后播放它，当我点击Cut函数时，它只是获得第二个我在播放器中，切到最后，再次开始录制，然后用新的录制覆盖chunks数组，直到结束。总结一下，我所需要的就是当我录制5秒时，然后我想覆盖最后3秒，所以我删除了数组中的最后3个元素，当我这样做时，将新的块推入原始数组，并将新的块发送到音频播放器，它第一次按预期播放如果我再次按下播放，它只会播放新录制的部分，而没有我从旧录制中保留的前2秒

let audioChunks = [];
let Recorder = null;
const recordAudio = () => {
    return new Promise(resolve => {
        navigator.mediaDevices.getUserMedia({ audio: true })
            .then(stream => {
                const mediaRecorder = new MediaRecorder(stream);
                mediaRecorder.addEventListener("dataavailable", event => {
                    audioChunks.push(event.data);
                });

                const start = () => {
                    mediaRecorder.start(1000);
                };

                const stop = () => {
                    return new Promise(resolve => {
                        mediaRecorder.addEventListener("stop", () => {
                            const audioBlob = new Blob(audioChunks,{type: 'audio/mpeg-3'});
                            const audioUrl = URL.createObjectURL(audioBlob);
                            const audio = new Audio(audioUrl);
                            document.getElementById("AudioRecodingPlayer").src = audio.src;
                            document.getElementById("AudioRecodingPlayer").currentTime = 0;
                            const play = () => {
                                audio.play();
                            };

                            resolve({ audioBlob, audioUrl, play });
                        });

                        mediaRecorder.stop();
                    });
                };

                resolve({ start, stop });
            });
    });
};

async function StartRecording(){
    Recorder = await recordAudio();
    Recorder.start();
}

async function StopRecording(){
    const audio = Recorder.stop();
}
function Cut(){
    var Audio = document.getElementById("AudioRecodingPlayer");
    var CurrenTime = Math.round(Audio.currentTime);
    audioChunks.length = CurrenTime;
    StartRecording();
}

Answer 1

在Cut()函数中，您实际上并没有删除数组的元素，也没有更改索引或窗口。您只需更改length的值。

您需要做的是覆盖音频块，或者从该点开始删除这些块。

let audioChunks = [];
let Recorder = null;
const recordAudio = () => {
    return new Promise(resolve => {
        navigator.mediaDevices.getUserMedia({ audio: true })
            .then(stream => {
                const mediaRecorder = new MediaRecorder(stream);
                mediaRecorder.addEventListener("dataavailable", event => {
                    audioChunks.push(event.data);
                });

                const start = () => {
                    mediaRecorder.start(1000);
                };

                const stop = () => {
                    return new Promise(resolve => {
                        mediaRecorder.addEventListener("stop", () => {
                            const audioBlob = new Blob(audioChunks,{type: 'audio/mpeg-3'});
                            const audioUrl = URL.createObjectURL(audioBlob);
                            const audio = new Audio(audioUrl);
                            document.getElementById("AudioRecodingPlayer").src = audio.src;
                            document.getElementById("AudioRecodingPlayer").currentTime = 0;
                            const play = () => {
                                audio.play();
                            };

                            resolve({ audioBlob, audioUrl, play });
                        });

                        mediaRecorder.stop();
                    });
                };

                resolve({ start, stop });
            });
    });
};

async function StartRecording(){
    Recorder = await recordAudio();
    Recorder.start();
}

async function StopRecording(){
    const audio = Recorder.stop();
}

function Cut(){
    var Audio = document.getElementById("AudioRecodingPlayer");
    var CurrenTime = Math.round(Audio.currentTime);
    audioChunks.splice(CurrentTime); // this will actually remove the elements after the "CurrentTime" index
    StartRecording();
}