top of page
Search
1 min read

Testing with Web Speech API

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.





34 views

コメント

Thank You for Visiting Everything Neurodiversity!

Hello, Thank you for visiting Everything Neurodiversity. This site is a passion project of mine. The hosting costs are minimal and I try to dedicate time to it whenever I can. I intend to keep this site as educational and ad free. 

​

​

I have learned a great deal from working on this site and the social platforms that go along with it. So much that I have started another site dedicated to building a more sustainable and easier fashion shopping expiereince. It has recently been selected for sponsorship in the Microsoft Founders Hub Program and I'm excited for the new developments this will enable. The first 10,000 users who make a purchase through the site will get lifetime Premier Status enabling rewards up to 17%! Check it out here: RunwayRewards.Shop or browse the integrated page below: 

popular posts

music

Books

1
2

HR Resources

events

bottom of page