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

Question

Hello Everyone I am trying to Record Audio and then after Recording I play it and when I hit the Cut function it just get the second I am on it in the player and cut to the end and start recording again and then overwrite the chunks array till the end with the new recording to sum up all of that all I need is when I record 5 seconds and then I want to overwrite the last 3 seconds so I remove the last 3 elements in the array and push the new chunks to the original array when I do that and send the new chunk to the audio player it plays the first time as intended and if I pressed play again it just plays the newly recorded part only without the first 2 seconds that I preserved from the old recording

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

On the Cut() function, you are not actually removing the elements of the array, nor changing the index or window. You are only changing the value of length.

What you would have to do is overwrite the audio chunks, or remove the chunks from that point forward.

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();
}