Question

我有一个带有svg的基于Web的应用程序。当用户将他们的手指移动到屏幕上时，根据他们所在的svg的哪个部分给出不同的描述。但是，如果用户移动到不同的svg路径，我想取消当前的语音话语。目前，语音合成api将继续读出描述，即使用户在不同的路径上。 if ('speechSynthesis' in window)的原因是我的脚本的其余部分将在Firefox上运行。

这是我的语音合成功能：

if ('speechSynthesis' in window) {
   var msg = new SpeechSynthesisUtterance();
   var voices = window.speechSynthesis.getVoices();
   msg.voice = 'native';
   msg.rate = 2;
}

...

function vibStart(event) {
      event.preventDefault();
      e = document.elementFromPoint(event.touches.item(0).clientX, event.touches.item(0).clientY);
      for (var i = 0; i<paths.length +1; i += 1) {
               if (e.id == "path" + i) {
                           if ('speechSynthesis' in window) {
                             msg.text = document.getElementById("desc" + i).firstChild.data;
                             speechSynthesis.speak(msg);
                             msg.addEventListener('end', function () {
                                 speechSynthesis.cancel();
                             });
                           }
               }
       }
 }

是否有某种方法可以将语音文本存储为变量，然后针对e.id进行检查，如果它们相同，则取消语音发音？

修改

我已尝试在speechSynthesis.cancel();之前添加msg.text，但这也无法解决问题。虽然当用户移动到新路径时它确实取消了话语，但它并不会立即开始新的话语。

Answer 1

根据@Kerstomaat的建议，我通过简单地创建一个名为spoken的全局变量并将其设置为null来解决我的问题。

然后我将代码块从if ('speechSynthesis' in window)更改为：

('speechSynthesis' in window) {
   var speech = document.getElementById("desc" + i);
   if (spoken !== speech) { 
      speechSynthesis.cancel()      
      msg.text = document.getElementById("desc" + i).firstChild.data;
      speechSynthesis.speak(msg);
      spoken = speech;
}

这导致在您成为新路径时触发描述，并且前面的描述停止播放。似乎解决了这个问题！

如果用户更改为不同的SVG路径，则取消当前语音发声

1 个答案: