Talking Interactive Clock

1

Greetings, I don't have any coding knowledge so I'm wondering if someone might be able to help me with this? I noticed that on HypeDocks there is a free clock that syncs with the time of the respective device.
See here: https://www.hypedocks.com/watch/
Is there a way to make the clock interactive where if a person taps on it, it would speak the actual time?
In other words, if I had the audio files with the recorded voice speaking the actual times and if the person taps on the clock it would accurately speak the time out loud.

Thoughts on this? Perhaps it beyond the scope of this forum but just thought I would ask...

Mark

2

Sure; because the clock animation uses the actual time, you don't even really need to worry about any type of integration with it. You could just add an On Mouse Click action handler to the top symbol or your own invisible rectangle element and have that use a Run JavaScript… action.

This wouldn't be too difficult to do, though is the recorded audio a requirement of the project? If so, you'll need to do quite a bit more work on making recordings for all the possibilities and aligning these.

Note that the web browser has an API for text-to-speech.

In both cases, I imagine chatgpt can do a good job of making the code for you. For example, here's the result of

write me a minimal html page that has a button; when the button is clicked it runs javascript code to speak the time of the day.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Time Speaker</title>
</head>
<body>
  <button onclick="speakTime()">Speak the Time</button>

  <script>
    function speakTime() {
      // Get the current date and time
      const now = new Date();
      
      // Convert the current time to a readable string
      const timeString = now.toLocaleTimeString();
      
      // Create a speech synthesis utterance
      const utterance = new SpeechSynthesisUtterance(`The time is ${timeString}`);
      
      // Speak the utterance
      speechSynthesis.speak(utterance);
    }
  </script>
</body>
</html>

You could simply move the body of speakTime() into the on mouse click handler.

1 Like