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

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

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

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

项目介绍

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，并了解其在实际应用中的使用方法和最佳实践。希望本教程对您有所帮助！

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

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

登录后查看全文

项目优选

收起

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

deepin linux kernel

Ascend Extension for PyTorch

本项目是CANN提供的神经网络类计算算子库，实现网络在NPU上加速计算。

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

ops-transformer

本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。

flutter_flutter

本仓库是 Flutter SDK 与 Flutter Engine 的 OpenHarmony 适配版本，由 CPF-Flutter 团队维护。开发者可使用熟悉的 Flutter 技术栈开发 OpenHarmony 应用，3.35.7 及以后的适配版本可基于本仓库源码构建支持 OpenHarmony 的 Flutter Engine。

Cangjie-Examples

本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。