JSFiddle - React, Tailwind, and code Playground

by gustav75

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio Sampler</title>
</head>
<body>
    <button id="recordButton">Aufnahme starten</button>
    <button id="playButton" disabled>Sound abspielen</button>

    <script src="sampler.js"></script>
</body>
</html>

JavaScript

let audioChunks = [];
let recorder;
let audioBlob;
let audioUrl;
let audio;

document.getElementById('recordButton').addEventListener('click', async () => {
    // Überprüfen, ob der Recorder existiert, wenn nicht, dann erstellen
    if (!recorder) {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            recorder = new MediaRecorder(stream);

            // Wenn Daten verfügbar sind, füge sie zu audioChunks hinzu
            recorder.ondataavailable = (event) => {
                audioChunks.push(event.data);
            };

            // Wenn die Aufnahme gestoppt wurde, erstelle den Blob und Audio-URL
            recorder.onstop = () => {
                audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                audioUrl = URL.createObjectURL(audioBlob);
                audio = new Audio(audioUrl);
                document.getElementById('playButton').disabled = false;  // Aktiviert den Play-Button
            };
        } catch (err) {
            console.error("Fehler beim Zugriff auf das Mikrofon:", err);
            alert("Fehler beim Zugriff auf das Mikrofon. Bitte überprüfe die Mikrofoneinstellungen.");
            return;
        }
    }

    // Aufnahme starten oder stoppen
    if (recorder.state === 'inactive') {
        audioChunks = [];
        recorder.start();
        document.getElementById('recordButton').textContent = 'Aufnahme läuft... Drücke erneut zum Stoppen';
    } else {
        recorder.stop();
        document.getElementById('recordButton').textContent = 'Aufnahme starten';
    }
});

document.getElementById('playButton').addEventListener('click', () => {
    if (audio) {
        audio.play();
    }
});