Отменить текущее речевое высказывание, если пользователь переходит на другой путь SVG

У меня есть веб-приложение с svg. Когда пользователь проводит пальцем по экрану, даются разные описания в зависимости от того, в какой части 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, но это тоже не решает проблему. Хотя он отменяет высказывание, когда пользователь переходит на новый путь, он не сразу начинает новое высказывание.


javascript svg html speech-synthesis
person truly-daunting    schedule 08.08.2016    source источник
comment
Почему бы просто не сохранять e.id каждый раз и не запускать речь только тогда, когда это изменится? Вы можете сохранить его как переменную в той же области, что и msg, например.   -  person Kerstomaat    schedule 09.08.2016
comment
@Kerstomaat у вас есть пример кода?   -  person truly-daunting    schedule 09.08.2016
comment
Нет, не совсем, понятия не имею, как выглядит (остальная) часть вашего кода, и никогда не работали с Speech API. Может быть, вы могли бы сделать минимальную рабочую демонстрацию на jsfiddle.net?   -  person Kerstomaat    schedule 09.08.2016

Ответы (1)


arrow_upward
1
arrow_downward

Развивая предложение @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;
}

Это привело к тому, что описания срабатывали каждый раз, когда вы являетесь новым путем, а предыдущее описание переставало воспроизводиться. Вроде решил проблему!

person truly-daunting    schedule 30.08.2016