js实现浏览器中麦克风可视化波形输入识别成文本代码

代码语言:html

所属分类:多媒体

代码描述:js实现浏览器中麦克风可视化波形输入识别成文本代码

代码标签: js 浏览器 麦克风 可视化 波形 输入 识别 文本 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
   
<meta charset="UTF-8">
   
<title>降噪后语音识别</title>
   
<style>
       
.container {
           
margin: 20px;
           
padding: 10px;
       
}
       
#visualizer {
           
width: 100%;
           
height: 100px;
           
background: #f0f0f0;
       
}
       
.status, .result {
           
margin: 10px 0;
           
padding: 10px;
           
border: 1px solid #ccc;
       
}
   
</style>
</head>
<body>
   
<div class="container">
       
<button id="startBtn">开始录音</button>
       
<button id="stopBtn">停止录音</button>
       
<canvas id="visualizer"></canvas>
       
<div id="status" class="status">状态:未开始</div>
       
<div id="result" class="result">识别结果将显示在这里</div>
   
</div>

   
<script>
        class NoiseReducer {
            constructor(audioContext) {
                this.audioContext = audioContext;
                this.init();
            }

            init() {
                // 创建音频处理节点
                this.noiseReducerNode = this.audioContext.createScriptProcessor(4096, 1, 1);
               
                // 降噪参数
                this.noiseThreshold = 0.015; // 噪声阈值
                this.smoothingFactor = 0.2;  // 平滑系数
                this.previousSample = 0;

                this.noiseReducerNode.onaudioprocess = (audioProcessingEvent) => {
                    const inputBuffer = audioProcessingEvent.inputBuffer;
                    const outputBuffer = audioProcessingEvent.outputBuffer;
                   
                    const inputData = inputBuffer.getChannelData(0);
                    const outputData = outputBuffer.getChannelData(0);

                    // 对每个采样点进行降噪处理
                    for (let i = 0; i < inputData.length; i++) {
                        // 计算当前采样点的幅度
                        const amplitude = Math.abs(inputData[i]);

                        // 如果幅度小于噪声阈值,将其视为噪声并减弱
                        if (amplitude < this.noiseThreshold) {
                            outputData[i] = inputData[i] * 0.1; // 降低噪声音量
                        } else {
                            // 使用平滑处理减少突变
                            outputData[i] = this.smoothingFactor * inputData[i] +
                                          (1 - this.smoothingFactor) * this.previousSample;
                        }
                       
                        this.previousSample = outputData[i];
                    }
                };
            }

            connect(source, destination) {
                source.connect(this.noiseReducerNode);
                this.noiseReducerNode.connect(destination);
            }

            disconnect() {
                this.noiseReducerNode.disconnect();
            }
        }

        class AudioVisualizer {
            constructor(canvas) {
                this.canvas = canvas;
                this.canvasCtx = canvas.getContext('2d');
                this.WIDTH = canvas.width;
                this.HEIGHT = canvas.height;
            }

            draw(dataArray, bufferLength) {
                this.canvasCtx.fillStyle = .........完整代码请登录后点击上方下载按钮下载查看

网友评论0