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 不能在 webapps 中工作，比如播放音频文件。这在 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之后只为特殊的内部函数注册了一次事件。

Answer 2

好的。我今天解决了这个问题。问题是 iOS 不会让语音 API 以编程方式运行，除非我们在用户交互下触发了一次。

所以我们可以聆听用户交互并触发一个无声的语音，让我们稍后以编程方式说话。

这是我的代码。

let hasEnabledVoice = false;

document.addEventListener('click', () => {
  if (hasEnabledVoice) {
    return;
  }
  const lecture = new SpeechSynthesisUtterance('hello');
  lecture.volume = 0;
  speechSynthesis.speak(lecture);
  hasEnabledVoice = true;
});