实时语音转写的前端实现方案_前端语音转文字-CSDN博客

本文链接：https://blog.csdn.net/Z_Joker_J/article/details/136030486

本文介绍了如何在JavaScript中创建AudioContext和相关节点，如MediaStreamSourceNode和ScriptProcessorNode，以便从用户麦克风获取音频并进行实时处理。同时提供了在Edge和Chrome浏览器中无HTTPS情况下安全开启麦克风权限的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 创建一个音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 创建一个MediaStreamSourceNode，用于获取用户的麦克风输入
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaStreamSource = audioContext.createMediaStreamSource(stream);

// 创建一个ScriptProcessorNode，用于处理音频数据
const bufferSize = 4096;
const scriptProcessorNode = audioContext.createScriptProcessor(bufferSize, 1, 1);

// 当有音频数据可用时，将其发送到服务器或进行其他处理
scriptProcessorNode.onaudioprocess = event => {
const inputBuffer = event.inputBuffer;
const outputBuffer = event.outputBuffer;

for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
const inputData = inputBuffer.getChannelData(channel);
const outputData = outputBuffer.getChannelData(channel);

// 在这里处理音频数据，例如发送到服务器或进行实时分析
// ...
}
};

// 将MediaStreamSourceNode连接到ScriptProcessorNode，然后连接到音频输出
mediaStreamSource.connect(scriptProcessorNode);
scriptProcessorNode.connect(audioContext.destination);
})
.catch(error => {
console.error('获取麦克风输入失败：', error);
});

无https时开启麦克风权限的办法。

edge浏览器打开麦克风步骤
edge://flags/#unsafely-treat-insecure-origin-as-secure并在Insecure origins treated as secure输入栏中输入需要获取麦克风权限的白名单网址。然后，将右侧已禁用状态改成已启用，最后点击浏览器右下角重启按钮重启浏览器。