使用H5实现在线录音并保存到本地

最新推荐文章于 2024-05-24 10:45:40 发布

quweiie

最新推荐文章于 2024-05-24 10:45:40 发布

阅读量617

点赞数 2

分类专栏： JavaScript&CSS 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/quweiie/article/details/133737943

版权

JavaScript&CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Online Audio Recorder</title>
</head>
<body>
    <button id="startRecord">Start Recording</button>
    <button id="stopRecord" disabled>Stop Recording</button>
    <audio id="audioPlayer" controls></audio>

    <script>
        let mediaRecorder;
        let audioChunks = [];
        let audioPlayer = document.getElementById('audioPlayer');
        let startRecordButton = document.getElementById('startRecord');
        let stopRecordButton = document.getElementById('stopRecord');

        startRecordButton.addEventListener('click', startRecording);
        stopRecordButton.addEventListener('click', stopRecording);

        async function startRecording() {
            try {
                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);
                    audioPlayer.src = audioUrl;

                    // Save the audio locally
                    const a = document.createElement('a');
                    a.href = audioUrl;
                    a.download = 'recording.wav';
                    a.style.display = 'none';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                };
                mediaRecorder.start();
                startRecordButton.disabled = true;
                stopRecordButton.disabled = false;
            } catch (error) {
                console.error('Error accessing microphone:', error);
            }
        }

        function stopRecording() {
            mediaRecorder.stop();
            startRecordButton.disabled = false;
            stopRecordButton.disabled = true;
        }
    </script>
</body>
</html>