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

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 进行检查，如果它们相同，则取消语音发音？

编辑

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

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

这会导致每当您进入新路径时都会触发描述，并且之前的描述会停止播放。似乎解决了问题!