iOS上的JS语音合成问题

Question

我最近实现了一个基本的Web应用程序，该应用程序依赖于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 不会让语音 API 以编程方式运行，除非我们在用户交互下触发了一次。

因此，我们可以监听用户交互并触发一段无声语音，以便我们稍后可以以编程方式说话。

这是我的代码。

let hasEnabledVoice = false;

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

Answer 2

IOS不允许以编程方式使用新的SpeechSynthesis-Api。用户必须明确触发该动作。我可以理解这个决定。但是我不明白，为什么Api无法在Web应用程序中正常工作，例如播放音频文件。这不适用于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>');

...该功能将不会触发。似乎在domload之后，IOS-Safari仅为一次内部特殊功能注册事件。