通过通过麦克风的声音去除噪音功能实现只识别真人说话的声音，电脑播放的声音不识别，完整的演示代码如下：
点击查看全文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Microphone Recognition</title>
</head>
<body>
<button id="startRecognition">Start Recognition</button>
<div id="result"></div>
<script>
let utterance = new SpeechSynthesisUtterance();
const synth = window.speechSynthesis;
let audioContext = new (window.AudioContext || window.webkitAudioContext)(); navigator.mediaDevices.getUserMedia({ 'audio': true }).then(function (stream) {
// 创建麦克风音频流
let microphoneStream = audioContext.createMediaStreamSource(stream);
// Check if the browser supports the Web Speech API
if (!('webkitSpeechRecognition' in window)) {
alert("Your browser does not support the Web Speech API. Please use Google Chrome.");
} else {
// 创建降噪、变声等音频处理节点
let noiseReducer = audioContext.createBiquadFilter();
noiseReducer.type = 'lowpass'; // 低通滤波器，用于降噪等
noiseReducer.frequency.value = 2000; // 设置频率
let pitchShifter = audioContext.createScriptProcessor(4096, 1, 1);
pitchShifter.onaudioprocess = function(event) {
let inputBuffer = event.inputBuffer;
let outputBuffer = event.outputBuffer;
for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
let inputData = inputBuffer.getChannelData(channel);
let outputData = outputBuffer.getChannelData(channel);
// 简单的移动平均滤波器来平滑声音信号
const bufferSize = 10; // 缓冲区大小
let buffer = [];
for (let sample = 0; sample < inputBuffer.length; sample++) {
// 将新的样本添加到缓冲区
buffer.push(inputBuffer[sample]);
// 如果缓冲区超过指定大小，则移除最旧的样本
if (buffer.length > bufferSize) {
buffer.shift();
}
// 计算平均值作为输出数据
let sum = buffer.reduce((acc, val) => acc + val, 0);
outputData[sample] = sum / buffer.length;
}
// 在这里实现变声逻辑
//for (let sample = 0; sample < inputBuffer.length; sample++) {
// outputData[sample] = inputData[sample]; // 这里可以做一些声音变化的操作
// }
}
};
// 连接音频处理节点
microphoneStream.connect(noiseReducer);
noiseReducer.connect(pitchShifter);
pitchShifter.connect(audioContext.destination);
// Initialize the SpeechRecognition object
const recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'zh-CN';
// Add event listeners for the recognition events
recognition.onstart = () => {
console.log("Recognition started.");
};
recognition.onresult = (event) => {
let text="";
console.log(event)
for (let i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
} else {
text += event.results[i][0].transcript;
}
}
document.getElementById('result').innerText = text;
};
recognition.onerror = (event) => {
console.error("Recognition error: " + event.error);
};
recognition.onend = () => {
console.log("Recognition ended.");
};
// Add event listener to the start button
document.getElementById('startRecognition').addEventListener('click', () => {
//这个是声音播报，无法干扰正常的人声识别
utterance.text = "上来看底甲方上来看分离可上搭建发的老是会计法拉斯柯达局，收快递费即时搭建分离可是，上来看京东方克里斯荆防颗粒圣诞节疯狂拉三等奖分离式可，上来看答复介绍可多了几分了开始减肥克里斯丁";
// 播放语音
synth.speak(utterance);
recognition.start();
});
}
});
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
最新提问
js如何流式输出ai的回答并折叠代码块，点击代码块右侧可预览代码？
ai大模型如何将文章转换成可视化一目了然的图片流程图图表？
大模型生成html版本的ui原型图和ppt演示文档的系统提示词怎么写？
rtsp视频直播流如何转换成websocket流在h5页面上观看？
为啥coze会开源工作流agent coze studio？
如何检测网页是通过收藏夹打开的？
python如何实现类似php的http动态脚本请求处理响应代码？
js如何实现类似php的http动态脚本请求处理响应代码？
trae与solo有啥区别不同？
vue如何让ai动态生成问卷调查多步骤表单式收集基础信息自动规划执行任务？
