【亲测免费】 Recorder.js 使用教程

2026-01-17 08:58:57作者：冯爽妲Honey

项目介绍

Recorder.js 是一个用于在浏览器中录制音频的 JavaScript 库。它可以将 Web Audio API 节点的输出捕获为未压缩的 PCM 音频，并以 WAV 容器格式存储。该项目由 Matt Diamond 创建，是一个流行的开源项目，广泛用于前端音频处理和录制。

项目快速启动

安装

首先，克隆项目仓库到本地：

git clone https://github.com/jwagener-soundcloud/recorder.js.git

然后，进入项目目录并安装依赖：

cd recorder.js
npm install

使用示例

以下是一个简单的使用示例，展示如何使用 Recorder.js 录制音频：

<!DOCTYPE html>
<html>
<head>
    <title>Recorder.js Demo</title>
    <script src="dist/recorder.js"></script>
</head>
<body>
    <button id="recordButton">开始录音</button>
    <button id="stopButton" disabled>停止录音</button>
    <audio id="playback" controls></audio>

    <script>
        let recorder;
        const recordButton = document.getElementById('recordButton');
        const stopButton = document.getElementById('stopButton');
        const playback = document.getElementById('playback');

        recordButton.addEventListener('click', startRecording);
        stopButton.addEventListener('click', stopRecording);

        function startRecording() {
            navigator.mediaDevices.getUserMedia({ audio: true })
                .then(stream => {
                    recorder = new Recorder(stream);
                    recorder.record();
                    recordButton.disabled = true;
                    stopButton.disabled = false;
                })
                .catch(err => {
                    console.error('无法获取音频流', err);
                });
        }

        function stopRecording() {
            recorder.stop();
            recordButton.disabled = false;
            stopButton.disabled = true;
            recorder.exportWAV(blob => {
                const url = URL.createObjectURL(blob);
                playback.src = url;
            });
            recorder.clear();
        }
    </script>
</body>
</html>

应用案例和最佳实践

应用案例

在线语音笔记：用户可以通过浏览器录制语音笔记，并将其保存为 WAV 文件。
音频留言板：用户可以在网站上录制音频留言，其他用户可以在线播放这些留言。
语音识别：结合语音识别 API，可以将录制的音频转换为文本。

最佳实践

错误处理：在获取音频流和录制过程中，应添加适当的错误处理逻辑，以提高用户体验。
性能优化：对于长时间录音，可以考虑使用分段录制和压缩技术，以减少内存占用和提高性能。
兼容性测试：确保在不同浏览器和设备上进行充分的兼容性测试，以支持尽可能多的用户。

典型生态项目

Web Audio API：Recorder.js 依赖于 Web Audio API，这是一个强大的音频处理接口，适用于各种音频处理需求。
LameJS：一个用于在浏览器中进行 MP3 编码的库，可以与 Recorder.js 结合使用，实现 MP3 格式的音频录制。
SpeechRecognition API：结合语音识别 API，可以将录制的音频转换为文本，实现语音到文本的功能。

通过以上内容，您可以快速上手 Recorder.js，并了解其在实际应用中的使用方法和最佳实践。希望本教程对您有所帮助！

recorder.js

*UNMAINTAINED* JavaScript library to record audio in browsers as used in the SoundCloud Javascript SDK.

项目地址：https://gitcode.com/gh_mirrors/re/recorder.js

登录后查看全文