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

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

代码语言：html

所属分类：多媒体

代码描述：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 = 'rgb(200, 200, 200)';
                this.canvasCtx.fillRect(0, 0, this.WIDTH, this.HEIGHT);
                this.canvasCtx.lineWidth = 2;
                this.canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
                this.canvasCtx.beginPath();

                const sliceWidth = this.WIDTH * 1.0 / bufferLength;
                let x = 0;

                for (let i = 0; i < bufferLength; i++) {
                    const v = dataArray[i] / 128.0;
                    const y = v * this.HEIGHT / 2;

                    if (i === 0) {
                        this.canvasCtx.moveTo(x, y);
                    } else {
                        this.canvasCtx.lineTo(x, y);
                    }

                    x += sliceWidth;
                }

                this.canvasCtx.lineTo(this.canvas.width, this.canvas.height / 2);
                this.canvasCtx.stroke();
            }
        }

        class SpeechProcessor {
            constructor() {
                this.initializeAudioContext();
                this.initializeSpeechRecognition();
                this.setupUI();
                this.isProcessing = false;
            }

            initializeAudioContext() {
                this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
                this.analyser = this.audioContext.createAnalyser();
                this.analyser.fftSize = 2048;
                this.bufferLength = this.analyser.frequencyBinCount;
                this.dataArray = new Uint8Array(this.bufferLength);
            }

            initializeSpeechRecognition() {
                const SpeechRecognition = windo.........完整代码请登录后点击上方下载按钮下载查看