JavaScript的Speech Synthesis API通过window.speechSynthesis实现文本转语音,创建SpeechSynthesisUtterance实例并调用speak()方法即可输出语音,支持调整音量、语速、音调和语言,需注意语音列表异步加载及语言设置,结合pause、resume和cancel方法可控制播放状态,适用于无障碍、教育等场景。

JavaScript的Speech Synthesis API可以让网页将文本内容转换为语音输出,无需依赖外部服务或插件。这个功能在无障碍访问、教育应用、提醒系统等场景中非常实用。下面介绍如何使用它实现基本的语音合成功能。
启用语音合成
浏览器原生支持window.speechSynthesis对象,通过它可以控制语音播放。要让文字“说出来”,需要创建一个SpeechSynthesisUtterance实例,并传递给speechSynthesis.speak()方法。
示例代码:
const utterance = new SpeechSynthesisUtterance("你好,这是语音合成示例");speechSynthesis.speak(utterance);
调整语音参数
你可以自定义语音的音量、语速、音调和发音语言,使语音更符合实际需求。
立即学习“Java免费学习笔记(深入)”;
volume:音量,取值0.0到1.0 rate:语速,0.1到10,正常为1 pitch:音调,0到2,正常为1 lang:语言,如”zh-CN”表示中文普通话
设置示例:
AVCLabs
AI移除视频背景,100%自动和免费
268 查看详情
utterance.volume = 1;utterance.rate = 1;utterance.pitch = 1;utterance.lang = "zh-CN";
选择语音(Voice)
不同设备支持的语音种类不同,可通过speechSynthesis.getVoices()获取可用语音列表。注意:语音列表可能异步加载,建议监听voiceschanged事件。
获取并设置特定语音:
speechSynthesis.onvoiceschanged = () => { const voices = speechSynthesis.getVoices(); const chineseVoice = voices.find(voice => voice.lang === "zh-CN"); if (chineseVoice) { utterance.voice = chineseVoice; }};
控制播放状态
可以暂停、恢复或取消当前语音播放。
speechSynthesis.pause():暂停 speechSynthesis.resume():恢复 speechSynthesis.cancel():停止并清除队列
适合用于用户交互场景,比如点击按钮停止朗读。
基本上就这些。Speech Synthesis API简单易用,兼容主流现代浏览器,不复杂但容易忽略细节,比如语音加载时机和语言设置。合理使用能让网页更具交互性。
以上就是如何利用JavaScript的Speech Synthesis API实现语音合成?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/733845.html
微信扫一扫
支付宝扫一扫