iOS上的JS语音合成问题 [英] JS Speech Synthesis Issue on iOS

问题描述

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

I recently implemented a basic web app which relied on Google's TTS URL to generate clear MP3 files for playback on the front end.

此后需要进行额外的安全检查，这意味着我必须更新代码库以使用替代方法。

This has since been subject to an additional security check, meaning I have had to update the code base to use alternative methods.

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

One such alternative is javascript's speech synthesis API, i.e. SpeechSynthesisUtterance() and window.speechSynthesis.speak('...'). This works really well on my desktop and laptop but as soon as I use it on my iOS devices, the rate of the audio is accelerated significantly.

有人可以建议我可以做些什么来解决这个问题吗？

Can anyone suggest what I can do to resolve this?

请参阅下面的示例代码：

See below for example code:

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);

推荐答案

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

IOS doesn't allow to use the new SpeechSynthesis-Api programmatically. The user must trigger the action explicit. I can understand this decision. But I don't understand, why the Api is not working in webapps, like playing audio files. This is not working in IOS's default safari, but its working in 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中，例如...

This is working only with native dom elements. If you add a new tag programmatically into the dom like...

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

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

... the function will not triggered. It seems that IOS-Safari registers events for special internal functions only once after domload.

这篇关于iOS上的JS语音合成问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！