IE浏览器SpeechSynthesisUtterance未定义 如何实现全浏览器兼容文字转语音

IE全版本都不支持Web Speech API的SpeechSynthesisUtterance接口，这是报错的核心原因。另外你原有代码存在一处逻辑错误：input输入框的内容需要用value属性获取，而不是innerHTML，会导致即使是支持API的浏览器也取不到输入内容。

方案核心思路 #

做分层兼容：支持原生API的浏览器优先用原生实现，不支持的浏览器走服务端TTS生成音频回退，保证所有主流浏览器（包括IE9+）都能正常使用。

具体实现代码 #

<body>
    <h2>JavaScript Text to Speech</h2>
    <div><input type="text" id="text-to-speech" placeholder="Enter text to speak..."/></div>
    <div><button type="button" onclick="textToAudio()">Speak</button></div>
    <br/>
    <div><small><b>NOTE:</b> Enter text and click on speak button.</small></div>
    <!-- 兼容IE用的音频播放容器，默认隐藏 -->
    <audio id="tts-player" style="display:none;"></audio>
    <script>
        function textToAudio() {
            let inputEl = document.getElementById("text-to-speech");
            let text = inputEl.value.trim();
            if (!text) return;

            // 特性检测判断是否支持原生语音API
            if (window.SpeechSynthesisUtterance && window.speechSynthesis) {
                let speech = new SpeechSynthesisUtterance();
                speech.lang = "en";
                speech.text = text;
                speech.volume = 1;
                speech.rate = 1;
                speech.pitch = 1;
                window.speechSynthesis.speak(speech);
            } else {
                // 不支持原生API时走服务端回退
                let audioEl = document.getElementById("tts-player");
                // 此处替换为你自己的后端TTS接口地址，接口返回对应文本的音频流或音频文件地址
                audioEl.src = "/your-tts-api?text=" + encodeURIComponent(text) + "&lang=en";
                audioEl.play();
            }
        }
    </script>
</body>

服务端TTS接口实现说明 #

你可以用任意后端语言实现TTS能力：

• Node.js环境可以使用say、text-to-speech等库生成音频
• Python环境可以使用pyttsx3、edge-tts等库生成音频
• 也可以接入主流云厂商的离线TTS能力，无需依赖公网

接口只需接收文本参数、语言参数，返回音频文件或者音频流即可，IE9及以上都原生支持audio标签播放mp3格式音频。你可以给接口加缓存逻辑，相同文本不用重复生成音频，降低服务端性能消耗。

额外兼容说明 #

如果需要兼容IE8及更低版本，可以额外增加Flash TTS插件作为回退层，不过目前Flash已经停止维护，更推荐提示低版本IE用户升级浏览器。

内容的提问来源于stack exchange，提问作者sanjay kumar