0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WebSpeechAPI活用[削除禁止永久保存版]

Last updated at Posted at 2024-06-01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-Time Speech Demo</title>
</head>
<body>
    <h1>Real-Time Speech Demo</h1>
    <p>Type in the text box below, select a language, and it will be spoken in real-time.</p>
    <select id="languageSelect">
        <option value="en-US">English</option>
        <option value="ja-JP">日本語</option>
    </select>
    <br><br>
    <input type="text" id="inputText" placeholder="Type your text here" size="50">
    <button id="deleteButton">Delete</button>
    <label for="autoDelete">Auto Delete after Speech</label>
    <input type="checkbox" id="autoDelete">

    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const inputText = document.getElementById('inputText');
            const languageSelect = document.getElementById('languageSelect');
            const deleteButton = document.getElementById('deleteButton');
            const autoDeleteCheckbox = document.getElementById('autoDelete');

            inputText.addEventListener('input', () => {
                const text = inputText.value;
                const language = languageSelect.value;

                if (text.trim() === "") {
                    return;  // Ignore empty input
                }

                // Use Web Speech API's SpeechSynthesis
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = language;  // Set the selected language

                // Cancel previous speech and start new one to avoid overlap
                window.speechSynthesis.cancel();
                window.speechSynthesis.speak(utterance);

                // Event listener for when speech ends to delete input text
                utterance.onend = () => {
                    if (autoDeleteCheckbox.checked) {
                        clearInput();
                    }
                };
            });

            // Function to clear input text
            function clearInput() {
                inputText.value = '';
            }

            // Event listener for delete button
            deleteButton.addEventListener('click', clearInput);
        });
    </script>
</body>
</html>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?