javascript - iOS 上的 JS 语音合成问题

Question

我最近实现了一个基本的网络应用程序，该应用程序依赖 Google 的 TTS URL 生成清晰的 MP3 文件以在前端播放。

这已经受到额外的安全检查，这意味着我必须更新代码库以使用替代方法。

其中一个替代方案是 javascript 的语音合成 API，即 SpeechSynthesisUtterance() 和 window.speechSynthesis.speak('...')。这在我的台式机和笔记本电脑上运行得非常好，但一旦我在我的 iOS 设备上使用它，音频速率就会显着加快。

谁能建议我如何解决这个问题？

示例代码如下:

var msg = new SpeechSynthesisUtterance(); 
    msg.text = item.title;
    msg.voice = "Google UK English Male";
    msg.rate = 0.7;
    msg.onend = function(){
        console.log('message has ended');
        $('.word-img').removeClass('img-isplaying');
    };
    msg.onerror = function(){
        console.log('ERROR WITH SPEECH API');
        $('.word-img').removeClass('img-isplaying');
    };
window.speechSynthesis.speak(msg);

Answer 1

IOS 不允许以编程方式使用新的 SpeechSynthesis-Api。用户必须显式触发操作。我能理解这个决定。但我不明白，为什么 Api 在网络应用程序中不起作用，比如播放音频文件。这在 IOS 的默认 safari 中不起作用，但在 webapps 中起作用。

这里有一个小技巧:

<a id="trigger_me" onclick="speech_text()"></a>
<script>
    function speech_text() {
        var msg = new SpeechSynthesisUtterance();
        /* ... */
    }
    /* and now you must trigger the event for #trigger_me */
    $('#trigger_me').trigger('click');
</script>

这仅适用于原生 dom 元素。如果您以编程方式将新标签添加到 dom 中，例如...

$('body').append('<a id="trigger_me" onclick="speech_text()"></a>');

...该函数不会被触发。似乎IOS-Safari只在domload之后为特殊的内部函数注册一次事件。