JavaScript spielt Audio und Aufnahme gleichzeitig Problem ⇐ HTML

[Anonymous]

Ich entwickle eine JavaScript-Anwendung, bei der der Benutzer einen aufgenommenen Ton hört und gleichzeitig den Text wiederholt. Während dieses Vorgangs wird die App auch die Stimme des Benutzers aufzeichnen. Wenn der Benutzer beispielsweise klickt, um mit dem Zuhören zu beginnen, und "eins zwei vier" sagt, erfasst die Aufnahme nur "zwei drei vier", und die Klangqualität ist niedriger, mit einem leicht metallischen Ton.

Code: Select all

Record and Play Sound


Start Recording and Play Sound
Stop Recording and Sound



let mediaRecorder;
let audioChunks = [];
let playAudioContext;
let source;

// document.addEventListener('DOMContentLoaded', async () => {
// });

document.getElementById('start').addEventListener('click', async () => {

// Play a sound in a separate audio context
playAudioContext = new (window.AudioContext || window.webkitAudioContext)();
const response = await fetch('/mp3');
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await playAudioContext.decodeAudioData(arrayBuffer);
source = playAudioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(playAudioContext.destination);

// recording
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);

mediaRecorder.ondataavailable = event => {
if (event.data.size > 0) {
audioChunks.push(event.data);
}
};

mediaRecorder.onstop = () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
const audioUrl = URL.createObjectURL(audioBlob);
document.getElementById('audioPlayback').src = audioUrl;
audioChunks=[];
};
mediaRecorder.start(100);

source.start();

});

document.getElementById('stop').addEventListener('click', () => {
mediaRecorder.stop();
if (source) {
source.stop();
}
if (playAudioContext) {
playAudioContext.close();
}
});

Wenn ich zum ersten Mal spiele und anhte, bekomme ich "zwei drei vier", aber wenn ich erneut mit der Aufnahme beginne, ohne die Seite in diesem zweiten Mal neu zu laden, kann ich die Aufnahme korrekt abrufen.