session_url » Revisions »
Differences
This shows you the differences between the selected revisions of the page.
| session_url 2025-05-15 | session_url 2025-05-16 (current) | ||
| Line 6: | Line 6: | ||
| To ease assembling the %%URL%%, you can have WinSCP [[ui_generateurl|generate it for you]]. | To ease assembling the %%URL%%, you can have WinSCP [[ui_generateurl|generate it for you]]. | ||
| + | ===== [[syntax]] Syntax ===== | ||
| - | <!DOCTYPE html> | + | <code> |
| - | <html lang="en"> | + | <protocol> :// [ <username> [ : <password> ] [ ; <advanced> ] @ ] <host> [ : <port> ] / |
| - | <head> | + | </code> |
| - | <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> | + | |
| ===== [[elements]] Elements ===== | ===== [[elements]] Elements ===== | ||