Html5录音插件Recorder的使用教程

1. 项目介绍

Recorder 是一个用于Html5录音的开源项目，它支持在大部分已实现 getUserMedia 的移动端、PC端浏览器进行麦克风录音。Recorder不仅可以录制音频，还能实时处理音频流，支持多种格式输出，如mp3、wav、ogg等。此外，它还提供了丰富的插件，支持音频可视化、变速变调处理、语音识别等功能。

2. 项目快速启动

2.1 环境准备

确保你的开发环境支持Https或者localhost，因为录音功能需要安全的环境。

2.2 引入Recorder

在项目中引入Recorder的核心文件以及你需要的格式支持文件。以下是使用mp3格式的一个示例：

<script src="src/recorder-core.js"></script>
<script src="src/engine/mp3.js"></script>
<script src="src/engine/mp3-engine.js"></script>

2.3 初始化Recorder

var rec = Recorder({
    type: "mp3",
    sampleRate: 16000,
    bitRate: 16,
    onProcess: function(buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) {
        // 处理录音数据
    }
});

2.4 打开录音设备

rec.open(function() {
    // 成功打开录音设备后的回调
}, function(msg, isUserNotAllow) {
    // 处理用户拒绝授权或其他错误
});

2.5 开始录音

function recStart() {
    rec.start();
}

2.6 停止录音并获取音频文件

function recStop() {
    rec.stop(function(blob) {
        // 处理录音得到的Blob对象
    }, function(msg) {
        // 处理错误
    });
}

3. 应用案例和最佳实践

• 实时音频处理：利用Recorder提供的插件，可以实现音频的实时处理，如变声、混音等。
• 语音识别：Recorder可以将录音数据转换为文本，适用于语音识别场景。
• 音频格式转换：Recorder支持多种音频格式的转换，可以满足不同的应用需求。

4. 典型生态项目

• Recorder.js：核心库，提供录音功能。
• WaveView：用于音频波形的可视化展示。
• Sonic.js：音频变速变调处理插件。