Session Url :: WinSCP

This is an old revision of the document!

<!DOCTYPE html> <html lang=“en”> <head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Talking Tom Clone</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    background: #f0f0f0;
    padding: 40px;
  }

  img {
    width: 300px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }

  button {
    margin-top: 20px;
    padding: 15px 30px;
    font-size: 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
  }

  button:hover {
    background-color: #45a049;
  }

  #status {
    margin-top: 15px;
    font-weight: bold;
  }
</style>

</head> <body>

<h1>Talking Tom Clone</h1>
<img src="https://freeimage.host/images/2024/05/15/3rFyMyF.png" alt="Talking Tom" />
<br>
<button id="toggleButton">Play</button>
<div id="status">Press play to start listening</div>

<script>
  const button = document.getElementById("toggleButton");
  const statusText = document.getElementById("status");
  let listening = false;
  let recognition;

  if ("webkitSpeechRecognition" in window) {
    recognition = new webkitSpeechRecognition();
    recognition.continuous = false;
    recognition.lang = "en-US";
    recognition.interimResults = false;

    recognition.onstart = () => {
      statusText.textContent = "Listening...";
    };

    recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript;
      speak(transcript);
    };

    recognition.onerror = (event) => {
      console.error("Speech recognition error:", event.error);
      statusText.textContent = "Error occurred: " + event.error;
    };

    recognition.onend = () => {
      if (listening) {
        recognition.start(); // auto-restart
      }
    };
  } else {
    alert("Speech recognition not supported in this browser.");
  }

  function speak(text) {
    const utterance = new SpeechSynthesisUtterance(text);
    speechSynthesis.speak(utterance);
    statusText.textContent = "Repeating: " + text;
  }

  button.onclick = () => {
    if (!listening) {
      recognition.start();
      listening = true;
      button.textContent = "Stop";
    } else {
      recognition.stop();
      listening = false;
      button.textContent = "Play";
      statusText.textContent = "Stopped listening";
    }
  };
</script>

</body> </html>

Documentation

Support

Associations

Follow Us