能否在HTML/JavaScript中使用带API密钥的Google Speech-to-Text？

数据老陈

2026-7-4

可以在HTML/JavaScript中使用带API密钥的Google Speech-to-Text服务吗？

当然可以，但有几个关键问题必须重视：

密钥泄露风险始终存在：哪怕你在Google Cloud控制台给API密钥设置了域名限制，只要密钥出现在前端代码中，就有被用户通过浏览器开发者工具提取的可能。一旦密钥泄露，他人就能用你的配额调用服务，甚至产生超出预期的费用。
必须配置严格的使用限制：如果一定要在前端用，必须在Google Cloud控制台给API密钥添加应用限制（比如指定仅允许你的域名调用），同时确保Speech-to-Text服务已开启，且密钥拥有该服务的调用权限。没有这些限制的话，密钥极容易被滥用。
更稳妥的替代方案：优先建议把API调用逻辑放在后端服务中。前端只和自己的后端接口交互，由后端去调用Google Speech-to-Text服务——这样密钥完全不会暴露在前端，安全性大幅提升。
区分免费版与Cloud服务：你提到的HTML5免费版本应该是浏览器原生的Web Speech API，它无需Google Cloud API密钥，但功能、识别精度和配额限制和Cloud版Speech-to-Text有差异。如果Cloud版的功能是你必需的，前端调用带密钥的服务是可行的，但风险需要自行承担。

以下是一个前端调用的示例（仅作演示，生产环境强烈不建议直接使用）：

const apiKey = '你的API密钥';
const audioBlob = // 你的音频Blob数据

fetch(`https://speech.googleapis.com/v1/speech:recognize?key=${apiKey}`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    config: {
      encoding: 'LINEAR16',
      sampleRateHertz: 16000,
      languageCode: 'zh-CN'
    },
    audio: {
      content: btoa(String.fromCharCode(...new Uint8Array(audioBlob)))
    }
  })
})
.then(response => response.json())
.then(data => console.log('识别结果:', data))
.catch(error => console.error('调用失败:', error));