js 怎样录制音频

小老鼠

发布时间：2025-08-18 10:45:01

781人浏览过

来源于php中文网

原创

javascript录制音频主要依赖web audio api和mediarecorder api。1. 获取麦克风权限：通过navigator.mediadevices.getusermedia({ audio: true })请求用户授权，获得mediastream；2. 创建mediarecorder实例：使用mediastream初始化mediarecorder对象，开始录音；3. 监听数据：在dataavailable事件中收集音频数据块（blob）；4. 停止录制并处理：调用stop()后，在onstop事件中将所有数据块合并为完整blob，生成url供播放或下载。需注意浏览器兼容性、用户权限、音频格式支持（如audio/webm或audio/ogg）、文件大小控制等问题。录制后的音频可通过formdata上传至服务器，或使用analysernode实现可视化波形，结合web audio api进行实时音效处理、多轨混音、语音识别与合成等高级功能，充分发挥浏览器端音频处理潜力。

js 怎样录制音频

JavaScript录制音频主要依赖Web Audio API和MediaRecorder API。通过这两个核心工具，我们能直接在浏览器端捕获用户的麦克风输入，并将其保存为音频文件。

解决方案： 说实话，刚接触这块儿的时候，我也觉得有点儿玄乎，毕竟浏览器里直接操作麦克风，听起来就挺酷的。这东西用起来呢，其实并不算特别复杂，但里头有些小坑，得注意。

核心流程是这样的：

获取麦克风权限： 这是第一步，也是最关键的一步。我们得用
```
navigator.mediaDevices.getUserMedia({ audio: true })
```
去请求用户授权。如果用户同意了，你就能拿到一个媒体流（
```
MediaStream
```
）。
创建MediaRecorder实例： 拿到流之后，就可以用它来初始化
```
MediaRecorder
```
。这个对象就是负责实际录音的“设备”。
监听数据：
```
MediaRecorder
```
会周期性地把录到的音频数据切成小块（
```
Blob
```
）抛出来。我们需要监听
```
dataavailable
```
事件，把这些小块收集起来。
停止录制并处理： 当录制停止时（调用
```
stop()
```
方法），
```
MediaRecorder
```
会触发
```
stop
```
事件。这时候，把之前收集的所有数据块拼接成一个完整的
```
Blob
```
，然后就可以用
```
URL.createObjectURL()
```
给它生成一个临时的URL，或者通过
```
<a>
```
标签让用户下载。

一个简单的实现大概会是这样：

let mediaRecorder;
let audioChunks = [];
let audioBlob;

// 假设你HTML中有这些元素：
// <button id="startButton">开始录音</button>
// <button id="stopButton" disabled>停止录音</button>
// <a id="downloadButton" style="display:none;">下载录音</a>
// <audio id="audioPlayer" controls style="display:none;"></audio>

const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const downloadButton = document.getElementById('downloadButton');
const audioPlayer = document.getElementById('audioPlayer');

startButton.onclick = async () => {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        mediaRecorder = new MediaRecorder(stream);
        audioChunks = []; // 清空之前的音频块

        mediaRecorder.ondataavailable = event => {
            audioChunks.push(event.data);
        };

        mediaRecorder.onstop = () => {
            audioBlob = new Blob(audioChunks, { type: 'audio/webm' }); // 或者 'audio/ogg'，取决于浏览器支持
            const audioUrl = URL.createObjectURL(audioBlob);
            audioPlayer.src = audioUrl;
            downloadButton.href = audioUrl;
            downloadButton.download = 'recorded_audio.webm'; // 默认下载文件名
            downloadButton.style.display = 'block';
            audioPlayer.style.display = 'block';
            console.log('录音停止。音频URL:', audioUrl);
        };

        mediaRecorder.start();
        startButton.disabled = true;
        stopButton.disabled = false;
        downloadButton.style.display = 'none';
        audioPlayer.style.display = 'none';
        console.log('录音开始...');
    } catch (err) {
        console.error('访问麦克风出错:', err);
        alert('无法访问麦克风。请检查权限设置。');
    }
};

stopButton.onclick = () => {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
        // 停止麦克风流，释放资源
        mediaRecorder.stream.getTracks().forEach(track => track.stop());
        startButton.disabled = false;
        stopButton.disabled = true;
        console.log('正在停止录音...');
    }
};

当然，你还需要在HTML里准备好相应的按钮和音频播放器元素。

录制过程中可能遇到的问题及应对策略

这活儿听起来直接，但实际操作起来，总会有些意料之外的小状况。

最常见的就是浏览器兼容性问题。虽然现在主流浏览器对

MediaRecorder

的支持已经很不错了，但老旧版本或者某些小众浏览器可能就没那么给力了。所以，在代码里做个特性检测是个好习惯，比如检查

window.MediaRecorder

是否存在。如果不支持，至少给用户一个友好的提示，而不是直接报错。

用户权限是绕不过去的坎儿。

getUserMedia

会触发一个权限请求弹窗，如果用户拒绝了，或者浏览器安全策略限制了，你就拿不到麦克风。这时候，

catch

块里的错误处理就显得尤为重要，得告诉用户发生了什么，以及他们可能需要怎么做（比如去浏览器设置里手动开启权限）。

再来，就是音频格式的选择。

new Blob(audioChunks, { type: 'audio/webm' })

这里的

type

参数，

audio/webm

或者

audio/ogg

是比较常见的，它们通常包含了VP8/VP9视频编码（即使只有音频）或Opus音频编码。别指望录出来的音频直接就是个完美MP3，那通常需要后端服务或者像

ffmpeg.wasm

这样的前端库做进一步转码。如果你指定了一个浏览器不支持的MIME类型，

MediaRecorder

可能会直接报错或者录制失败。可以通过

MediaRecorder.isTypeSupported('audio/webm')

来检查支持情况。

最后，录制时长与文件大小。长时间录制会产生巨大的文件，这不仅占用用户设备存储，上传到服务器也会是个负担。可以考虑在录制过程中实时上传（比如通过WebSocket或者分块上传），或者对录制时长做限制。

如何处理录制音频的播放与进一步处理？

录完了，当然得能听能用才行。

播放方面， 前面代码里已经提到了，最直接的方式就是用

URL.createObjectURL()

生成一个临时的URL，然后把它赋值给一个

<audio>

元素的

src

属性。这样用户就可以直接在页面上播放刚才录制的内容了。这个URL是临时的，只在当前会话有效，页面刷新或者关闭就会失效。

PathFinder

AI驱动的销售漏斗分析工具

下载

进一步处理， 这块儿就比较有意思了，也更考验你的想象力。

上传到服务器： 这是最常见的需求。你可以把录制好的

audioBlob

对象直接通过

FormData

封装起来，然后用

fetch

或者

XMLHttpRequest

发送到你的后端接口。后端拿到这个

Blob

数据后，就可以像处理普通文件上传一样，保存起来或者进行转码（比如转成MP3、WAV等更通用的格式）。

// 假设你已经有了 audioBlob
const formData = new FormData();
formData.append('audioFile', audioBlob, 'my-recording.webm'); // 'my-recording.webm'是文件名

fetch('/upload-audio', { // 替换为你的后端上传接口
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));

音频可视化： 如果你想让录制过程看起来更酷炫，或者播放时有个波形图，Web Audio API里的
```
AnalyserNode
```
就派上用场了。你可以把
```
MediaStream
```
连接到
```
AnalyserNode
```
，然后周期性地获取音频的频率或时域数据，再用Canvas绘制出来。这能给用户带来很好的交互体验，让他们知道麦克风确实在工作，而且录到了声音。
前端转码（慎用）： 虽然不推荐，但如果你实在不想依赖后端，或者只是想做一些轻量级的格式转换，像
```
ffmpeg.wasm
```
这样的库可以在浏览器里运行FFmpeg，实现音频转码。但这东西体积通常不小，而且会消耗大量计算资源，用的时候得掂量掂量。

除了基础录制，JS还能实现哪些高级音频功能？

JS在浏览器端处理音频的能力远不止录制那么简单，Web Audio API打开了一个全新的世界。

实时音频处理与效果： 你可以把麦克风的输入流（或者其他音频源）连接到Web Audio API的各种节点（
```
AudioNode
```
），比如
```
GainNode
```
来控制音量，
```
BiquadFilterNode
```
来做均衡器，甚至可以创建自定义的
```
AudioWorkletNode
```
来实现更复杂的音频算法，比如混响、延迟、失真等效果。这意味着你可以在录制前或录制中实时处理音频，比如降噪或者加入特殊音效。
多轨混音： 想象一下，用户可以同时录制麦克风和播放背景音乐，然后把它们混合在一起。Web Audio API的
```
AudioContext
```
允许你管理多个音频源和目标，理论上可以实现一个简单的多轨混音器。这需要更精细的同步和路由控制，但方向是可行的。
语音识别与合成： 虽然不是直接的录音功能，但
```
Web Speech API
```
（包括
```
SpeechRecognition
```
和
```
SpeechSynthesis
```
）与录音功能结合起来，能实现非常强大的应用。你可以录制用户的语音，然后通过
```
SpeechRecognition
```
将其转换为文本，或者将文本转换为语音进行播放。这在语音助手、在线翻译等场景非常有用。
音频分析与特征提取： 除了前面提到的
```
AnalyserNode
```
用于可视化，你还可以利用Web Audio API对音频进行更深度的分析，比如检测音高、节奏、识别特定的声音事件等。这对于音乐教育、智能家居控制（通过声音指令）等领域都有潜在应用。