【亲测免费】 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

登录后查看全文

项目优选

收起

deepin linux kernel

Ascend Extension for PyTorch

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

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

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

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

昇腾LLM分布式训练框架

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

flutter_flutter