Código en HTML con JavaScript que te permite grabar la voz utilizando la API de Web Audio | Operating systems, scripting, PowerShell and security

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grabador de Voz</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">Grabador de Voz</h1>
        
        <div class="d-flex justify-content-center mb-3">
            <button id="startBtn" class="btn btn-primary me-2">Iniciar Grabación</button>
            <button id="stopBtn" class="btn btn-danger me-2" disabled>Detener Grabación</button>
            <button id="playBtn" class="btn btn-success me-2" disabled>Reproducir Audio</button>
            <button id="downloadBtn" class="btn btn-info" disabled>Descargar Audio</button>
        </div>

        <div class="d-flex justify-content-center">
            <audio id="audioPlayback" controls class="w-75"></audio>
        </div>
    </div>

    <!-- Bootstrap JS (Popper.js incluido) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        let mediaRecorder;
        let audioChunks = [];

        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const playBtn = document.getElementById('playBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const audioPlayback = document.getElementById('audioPlayback');

        let audioBlob;

        startBtn.addEventListener('click', async () => {
            audioChunks = [];
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });

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

            mediaRecorder.onstop = () => {
                audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
                const audioUrl = URL.createObjectURL(audioBlob);
                audioPlayback.src = audioUrl;
                playBtn.disabled = false;
                downloadBtn.disabled = false;
            };

            mediaRecorder.start();
            startBtn.disabled = true;
            stopBtn.disabled = false;
        });

        stopBtn.addEventListener('click', () => {
            mediaRecorder.stop();
            startBtn.disabled = false;
            stopBtn.disabled = true;
        });

        playBtn.addEventListener('click', () => {
            audioPlayback.play();
        });

        downloadBtn.addEventListener('click', () => {
            const downloadLink = document.createElement('a');
            const url = URL.createObjectURL(audioBlob);
            downloadLink.href = url;
            downloadLink.setAttribute('download', 'grabacion.webm');
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            URL.revokeObjectURL(url); // Revocamos la URL para liberar memoria
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Grabador de Voz</title>

</head>

<body>

<h1 class="text-center mb-4">Grabador de Voz</h1>

<button id="startBtn" class="btn btn-primary me-2">Iniciar Grabación</button>

<button id="stopBtn" class="btn btn-danger me-2" disabled>Detener Grabación</button>

<button id="playBtn" class="btn btn-success me-2" disabled>Reproducir Audio</button>

<button id="downloadBtn" class="btn btn-info" disabled>Descargar Audio</button>

</div>

</div>

let mediaRecorder;

let audioChunks = [];

const startBtn = document.getElementById('startBtn');

const stopBtn = document.getElementById('stopBtn');

const playBtn = document.getElementById('playBtn');

const downloadBtn = document.getElementById('downloadBtn');

const audioPlayback = document.getElementById('audioPlayback');

let audioBlob;

startBtn.addEventListener('click', async () => {

audioChunks = [];

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });

mediaRecorder.ondataavailable = event => {

audioChunks.push(event.data);

};

mediaRecorder.onstop = () => {

audioBlob = new Blob(audioChunks, { type: 'audio/webm' });

const audioUrl = URL.createObjectURL(audioBlob);

audioPlayback.src = audioUrl;

playBtn.disabled = false;

downloadBtn.disabled = false;

};

mediaRecorder.start();

startBtn.disabled = true;

stopBtn.disabled = false;

});

stopBtn.addEventListener('click', () => {

mediaRecorder.stop();

startBtn.disabled = false;

stopBtn.disabled = true;

});

playBtn.addEventListener('click', () => {

audioPlayback.play();

});

downloadBtn.addEventListener('click', () => {

const downloadLink = document.createElement('a');

const url = URL.createObjectURL(audioBlob);

downloadLink.href = url;

downloadLink.setAttribute('download', 'grabacion.webm');

document.body.appendChild(downloadLink);

downloadLink.click();

document.body.removeChild(downloadLink);

URL.revokeObjectURL(url); // Revocamos la URL para liberar memoria

});

</script>

</body>

</html>

Código en HTML con JavaScript que te permite grabar la voz utilizando la API de Web Audio (Web, Seguridad, JavaScript)

LIBRO DE POWERSHELL

LO ÚLTIMO

VÍDEOS