Recorder.js 使用教程

最新推荐文章于 2024-08-16 07:58:23 发布

卓华茵Doyle

最新推荐文章于 2024-08-16 07:58:23 发布

阅读量649

点赞数 14

本文链接：https://blog.csdn.net/gitblog_01010/article/details/141237540

版权

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

项目介绍

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>