【实用教程】在网页里集成语音输入：1. 在浏览器里完成录音
原文中文，约3200字，阅读约需8分钟。
📝
内容提要
本文介绍了如何在网页中集成语音识别（STT）功能，通过使用MediaRecorder完成录音并提供相关代码。下一篇文章将介绍如何使用大模型API进行文字转换。
🔎
延伸解读
浏览器兼容性处理要点
文章指出，iOS Safari 和基于 Chromium 的 Edge/Chrome 支持的录音文件格式不同，需要根据浏览器类型设置 mimeType。Safari 需指定 timeslice 参数，否则可能在停止录音时尚未记录数据。这些细节是实际开发中容易忽略但必须处理的问题，否则可能导致录音失败或数据丢失。
用户许可与错误处理
使用录音功能需要用户授权麦克风权限。文章建议区分用户拒绝和浏览器不支持两种情况，并给出相应的提示信息。对于用户拒绝，应引导其在浏览器设置中开启权限；对于不支持的情况，则提示浏览器不支持。合理的错误处理能提升用户体验，避免功能不可用时的困惑。
录音结束后的资源释放与重试机制
录音停止后，必须及时释放 MediaStream，否则录音提示可能不会消失，影响用户体验。此外，考虑到移动网络不稳定，文章建议在语音转文字请求失败时进行多次重试，并采用递增的等待间隔（如1秒、6秒、11秒）。这种设计能提高在弱网环境下的成功率。
❓
Q&A
如何在网页中集成语音识别功能？
可以使用MediaRecorder API来完成录音，并通过navigator.mediaDevices捕获音视频流。
MediaRecorder在不同浏览器中的支持情况如何？
iOS Safari和基于Chromium的Edge/Chrome支持的文件格式不同，需要特别处理。
使用MediaRecorder录音时需要注意哪些权限问题？
使用MediaRecorder时需要用户许可，如果用户拒绝，则无法进行录音。
如何处理录音停止后的数据？
录音停止后，需要将录音转换成文件并释放录音流，以避免影响用户体验。
语音输入功能的优势是什么？
语音输入功能可以鼓励用户输入更多内容，特别适合移动设备和一体机使用。
下一篇文章将讨论什么内容？
下一篇文章将介绍如何使用大模型API进行文字转换。
🏷️
