### 使用 TensorFlow.js 实现语音识别的完整代码示例 以下是基于所提供的引用内容以及专业知识整理的一个完整的 TensorFlow.js 语音识别代码示例。此代码展示了如何引入 `@tensorflow-models/speech-commands` 库并配置本地存储的模型文件路径来实现语音识别功能。 #### 完整代码示例 ```javascript import $ from 'jquery'; const tf = require('@tensorflow/tfjs'); const speechCommands = require('@tensorflow-models/speech-commands'); $(async () => { try { // 创建语音识别器实例 const recognizer = speechCommands.create( 'BROWSER_FFT', null, 'http://127.0.0.1:8080/speech/model.json', // 替换为您的模型 JSON 路径 'http://127.0.0.1:8080/speech/metadata.json' // 替换为元数据 JSON 路径 ); // 加载模型 await recognizer.ensureModelLoaded(); // 获取可识别的单词列表 const labels = recognizer.wordLabels(); console.log('可识别的单词:', labels); // 将标签显示到页面上 const resultElement = document.querySelector('#result'); resultElement.innerHTML = labels.map(item => `<div>${item}</div>`).join(''); // 设置语音监听回调 recognizer.listen(result => { const { scores } = result; const maxScoreIndex = scores.indexOf(Math.max(...scores)); const recognizedWord = labels[maxScoreIndex]; console.log(`识别结果: ${recognizedWord}`); // 更新界面高亮当前识别的单词 resultElement.innerHTML = labels.map((label, i) => { return ` <div style="background-color: ${ i === maxScoreIndex ? 'lightgreen' : 'transparent' };">${label}</div> `; }).join(''); }, { overlapFactor: 0.3, // 音频片段重叠比例 probabilityThreshold: 0.75 // 置信度阈值 }); } catch (error) { console.error('发生错误:', error); } }); ``` --- #### 关键点解析 1. **模型加载** - 模型文件通常由两部分组成：`model.json` 和 `metadata.json`[^2]。 - 这些文件可以通过训练好的语音识别模型导出，并部署到服务器或静态资源目录下供前端访问。 2. **语音识别核心逻辑** - 使用 `speechCommands.create()` 方法创建语音识别器实例，指定 FFT 类型和自定义模型路径[^2]。 - 调用 `ensureModelLoaded()` 方法确保模型已成功加载后再执行后续操作。 3. **结果显示** - 利用 `wordLabels()` 方法获取模型支持的词汇表，并将其渲染至 HTML 页面中以便实时展示识别结果[^2]。 - 当检测到匹配的音频信号时，通过计算得分最高的索引来定位对应的词汇，并更新 UI 显示状态。 4. **参数调整** - 参数 `overlapFactor` 控制相邻音频帧之间的重叠程度，影响性能与准确性平衡。 - 参数 `probabilityThreshold` 设定置信度阈值，过滤掉低概率的结果以减少误报率。 --- #### 注意事项 - 如果您计划将该应用部署到生产环境，请确保托管的模型文件可通过 HTTPS 访问，避免浏览器因安全策略阻止请求。 - 对于更复杂的场景（如多语言支持或多类别分类），可能需要重新训练模型或将现有模型扩展以满足特定需求[^3]。 ---