Speech Synthesis API Hervorhebung von Wörtern, wie sie gesprochen werden

Question

Momentan mache ich eine einfache App, in der Text mit der Sprachsynthese-API gesprochen wird. Ich möchte die Wörter (fett) hervorheben, während sie gesprochen werden. Ich habe derzeit eine sehr einfache Implementierung, die dies mit dem "Onboundary" -Ereignis durchführt. Ich frage mich jedoch, ob es eine bessere/nettere Vorgehensweise gibt, da meine Implementierung auf einigen Annahmen beruht.

Answer 1

Ihr Code funktioniert nicht, aber ich habe nur ein Beispiel geschrieben, das so funktioniert, wie Sie es möchten. Öffnen Sie die Geige zu sehen, es funktioniert

var utterance = new SpeechSynthesisUtterance(); 
var wordIndex = 0; 
var global_words = []; 
utterance.lang = 'en-UK'; 
utterance.rate = 1; 


document.getElementById('playbtn').onclick = function(){ 
    var text = document.getElementById('textarea').value; 
    var words = text.split(" "); 
    global_words = words; 
    // Draw the text in a div 
    drawTextInPanel(words); 
    spokenTextArray = words; 
    utterance.text = text; 
    speechSynthesis.speak(utterance); 
}; 

utterance.onboundary = function(event){ 
    var e = document.getElementById('textarea'); 
    var word = getWordAt(e.value,event.charIndex); 
    // Show Speaking word : x 
    document.getElementById("word").innerHTML = word; 
    //Increase index of span to highlight 
    console.info(global_words[wordIndex]); 

    try{ 
     document.getElementById("word_span_"+wordIndex).style.color = "blue"; 
    }catch(e){} 

    wordIndex++; 
}; 

utterance.onend = function(){ 
     document.getElementById("word").innerHTML = ""; 
    wordIndex = 0; 
    document.getElementById("panel").innerHTML = ""; 
}; 

// Get the word of a string given the string and the index 
function getWordAt(str, pos) { 
    // Perform type conversions. 
    str = String(str); 
    pos = Number(pos) >>> 0; 

    // Search for the word's beginning and end. 
    var left = str.slice(0, pos + 1).search(/\S+$/), 
     right = str.slice(pos).search(/\s/); 

    // The last word in the string is a special case. 
    if (right < 0) { 
     return str.slice(left); 
    } 
    // Return the word, using the located bounds to extract it from the string. 
    return str.slice(left, right + pos); 
} 

function drawTextInPanel(words_array){ 
console.log("Dibujado"); 
     var panel = document.getElementById("panel"); 
    for(var i = 0;i < words_array.length;i++){ 
     var html = '<span id="word_span_'+i+'">'+words_array[i]+'</span>&nbsp;'; 
     panel.innerHTML += html; 
    } 
} 

Bitte mit der folgenden Geige spielen:

Highlight spoken word SpeechSynthesis Javascript fiddle

Es markieren Sie das gesprochene Wort in div mit blauen, können Sie es mit kühnen Stil anpassen, aber die wichtig ist die Idee.

Hinweis: Beachten Sie, dass das Ereignis onboundary nur für die native (lokale) Sprachsynthese ausgelöst wird. Ändern der Stimme wie in den Google Examples (d. H. Google UK Englisch männlich) für eine Google Remote-Stimme, wird Ihren Code fehlschlagen, da die SpeechSynthesis API scheint nur einen Ton von den Google-Servern erzeugt zu spielen.