Verwenden von Sprachsynthese sprechen Array von Zeichenfolgen mit Pausen zwischen

Question

Ich versuche, eine solide Möglichkeit, ein Array von Zeichenfolgen an die Sprachsynthese-API mit Pausen zwischen jedem Array-Element zu sprechen übergeben. Z.B. speak item 1, pause für x seconds, rede item 2, etc.

Ich habe versucht, die API onend Methode/Ereignis, aber es funktioniert nur ein paar Mal, bevor es vollständig funktioniert, lesen Sie den Rest der Array-Elemente Rücken an Rücken von diesem Punkt an.

Vorschläge?

var dropdown = $('#item-select'), 
 
    interval = $('#item-interval').val() * 1000, 
 
    itemBtn = $('#item-btn'), 
 
    stopBtn = $('#item-stop'), 
 
    items = { 
 
    'first': ['hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine', 'hello, sunshine'], 
 
    'second': ['hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world', 'hello, world'] 
 
    }; 
 

 
if ('speechSynthesis' in window) { 
 
    function speak(text) { 
 
    var msg = new SpeechSynthesisUtterance(); 
 
    msg.text = text; 
 

 
    speechSynthesis.speak(msg); 
 
    
 
    msg.addEventListener('end', function(e) { 
 
     speechSynthesis.pause(); 
 
     window.setTimeout(function() { 
 
     speechSynthesis.resume(); 
 
     }, interval); 
 
    }); 
 
    } 
 
    
 
    itemBtn.on('click', function(evt) { 
 
    currItem = items[dropdown.val()]; 
 
    for (var phrase in currItem) { 
 
     speak(currItem[phrase]); 
 
    } 
 
    }); 
 
    stopBtn.on('click', function(evt) { 
 
    speechSynthesis.cancel(); 
 
    }); 
 
} else { 
 
    console.log('Voice synthesis isn\'t supported in your browser.'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id='item-select'> 
 
    <option selected value='first'>First Item</option> 
 
    <option value='second'>Second Item</option> 
 
</select> 
 
<label for='item-interval'>Interval (seconds)</label> 
 
<input id='item-interval' max='10' name='item-interval' type='range' value='2'> 
 
<button id='item-btn'>Speak!</button> 
 
<button id='item-stop'>CEASE FIRE</button>

Answer 1

Wie über eine Timeout-verzögerten rekursiven Reise durch die Anordnung der Objekte:

function speak(list) { 
    if (list.length) { 
     var msg = new SpeechSynthesisUtterance(); 
     msg.text = list[0]; 

     speechSynthesis.speak(msg); 

     msg.addEventListener('end', function(e) { 
     window.setTimeout(() => { 
      speak(list.slice(1)); 
     }, interval); 
     }); 
    } 
    } 

    itemBtn.on('click', function(evt) { 
    const list = items[dropdown.val()]; 
    speak(list); 
    }); 

Es ist für mich gearbeitet, aber dann traf ich einige Seltsamkeit. Zu Zeiten SpeechSynthesis nur STOPPED feuern das 'Ende' Ereignis:

Diese Geige fügt einige Protokolle hinzu, um anzuzeigen, wenn die Äußerung beginnt/endet; Beobachten Sie, ob das "Ende" -Ereignis nur ohne Grund endet.

https://jsfiddle.net/cak4bju9/2/

Dieser Stapel Post auf dem Buggy Verhalten war nützlich:

SpeechSynthesis API onend callback not working