The latest installment in a series of posts related to finding an immersive test solution, this should work under chrome on desktop and android.
Code in place:
<!DOCTYPE html>
<html>
<head>
<title>Web Speech API to Listen a Blog Post - By WebMasterCampus.com</title>
</head>
<style>
.highlight {
background-color: yellow;
}
</style>
<body>
<button onclick="read()">Listen to Post</button>
<button onclick="pause()">Pause</button>
<button onclick="resume()">Resume</button>
<div id="text-to-read">
This is the text that will be highlighted as it is read.
</div>
</body>
<script>
function speak(message, language='en-us'){
const msg = new SpeechSynthesisUtterance(message);
msg.lang = language;
speechSynthesis.speak(msg);
}
function read() {
// Get the text to be spoken
var text = document.querySelector("#text-to-read").innerText;
// Speak the text
speak(text);
}
function pause() {
window.speechSynthesis.pause();
}
function resume() {
window.speechSynthesis.resume();
}
function highlightWord(index) {
// Get all the words in the text
var words = document.querySelectorAll("#text-to-read span");
// Remove the highlight from all the words
for (var i = 0; i < words.length; i++) {
words[i].classList.remove("highlight");
}
// Highlight the current word
words[index].classList.add("highlight");
}
// Add a boundary event listener to the speech synthesis object
window.speechSynthesis.addEventListener("boundary", function(event) {
// Get the index of the word boundary
var index = event.charIndex;
// Highlight the word at the boundary
highlightWord(index);
});
</script>
</html>Highlight functionality doesnt seem to be working, but I will take what I can get. It seems the text to speech is working well. however this does not work well on ios/chromer
I asked Chat GPT about this and it pointed me to espeak as a posisble alternative.
![Neurodiversity and Leadership in the Hiring Process [draft]](https://static.wixstatic.com/media/0a19fd_a3299cad5f2041349ac65e30de6ead87~mv2.png/v1/fill/w_522,h_392,fp_0.50_0.50,q_95,enc_auto/0a19fd_a3299cad5f2041349ac65e30de6ead87~mv2.png)
