2
4

Web Speech APIの機能で、しゃべるブラウザです。

Last updated at Posted at 2024-09-10

fc0bb942-be42-4527-970f-90246bcfa0dd.png

スクリーンショット 2024-09-11 042001.png

英語と日本語のテキストを入力し、それを読み上げることができます。

サンプルテキスト 日本語

物語: 言葉の力
未来の世界では、人工知能が人々の生活に深く根付いていた。人々はAIと一緒に暮らし、AIに助けられながら日々を過ごしていた。その中でも、「言葉」は特別な意味を持っていた。言葉は人と人をつなげるだけでなく、AIと人間の架け橋にもなっていた。

ミライという名前の少女は、いつも孤独を感じていた。彼女は他の人と違って言葉に敏感で、時に普通の会話すら重たく感じることがあった。ある日、ミライは新しいAIプログラムを開発していた。彼女はそのプログラムに、自分の気持ちを言葉にして音声として伝える機能を搭載しようと考えた。

「AIに感情を込めて話させることができたら、人間にもっと寄り添えるかもしれない...」

ミライは、シンプルなコードを書き始めた。そのコードは、入力されたテキストを英語と日本語で読み上げるだけのものだった。しかし、彼女にとってそれは単なるテキスト読み上げではなかった。彼女は、このプログラムが言葉の重みを伝え、孤独な人々に寄り添うことを夢見ていた。

彼女は、テキスト入力ボックスに「Hello, how are you today?」と打ち込んだ。コードを実行すると、AIの穏やかな声が部屋に響いた。

「Hello, how are you today?」

その音声は、どこか優しさを感じさせるもので、ミライの心に少しだけ温かさをもたらした。次に、彼女は日本語のテキストボックスに「こんにちは、お元気ですか?」と打ち込んだ。今度は日本語で音声が流れた。

「こんにちは、お元気ですか?」

ミライはふと微笑んだ。この音声は機械的だったが、そこには彼女が込めた思いが反映されていた。「言葉」は単なる音の羅列ではなく、感情を伝えるものだということを改めて感じたのだ。

サンプルテキスト 英語
Story: The Power of Words In the future world, artificial intelligence was deeply rooted in people's lives. People lived with AI and spent their days being helped by AI. Among them, "words" had a special meaning. Words not only connected people, but also served as a bridge between AI and humans. A girl named Mirai always felt lonely. Unlike other people, she was sensitive to words, and sometimes even normal conversations felt heavy. One day, Mirai was developing a new AI program. She thought of equipping the program with a function that would put her feelings into words and convey them as voice. "If we could make AI speak with emotion, we might be able to be closer to humans..." Mirai began writing a simple code. The code simply read the entered text in English and Japanese. However, to her, it was not just a text-to-speech. She dreamed that this program would convey the weight of words and be close to lonely people. She typed "Hello, how are you today?" into the text input box. When she ran the code, the AI's gentle voice echoed in the room. "Hello, how are you today?" The voice had a gentle quality to it, and it warmed Mirai's heart a little. Next, she typed "Hello, how are you?" into the Japanese text box. This time, the voice came out in Japanese. "Hello, how are you?" Mirai suddenly smiled. The voice was mechanical, but it reflected the feelings she had put into it. She was reminded that "words" are not just a string of sounds, but something that conveys emotions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Speech API Example with Input</title>
</head>
<body>
    <h1>Web Speech API Example</h1>
    
    <label for="englishText">Enter English Text:</label>
    <input type="text" id="englishText" placeholder="Type something in English">
    <button onclick="speakEnglish()">Speak English</button>

    <br><br>

    <label for="japaneseText">日本語のテキストを入力してください:</label>
    <input type="text" id="japaneseText" placeholder="日本語で入力してください">
    <button onclick="speakJapanese()">日本語を話す</button>

    <script>
        function speakEnglish() {
            const text = document.getElementById('englishText').value || 'Hello, how are you today?';
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = 'en-US'; // 言語コードを英語に設定
            window.speechSynthesis.speak(utterance);
        }

        function speakJapanese() {
            const text = document.getElementById('japaneseText').value || 'こんにちは、お元気ですか?';
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = 'ja-JP'; // 言語コードを日本語に設定
            window.speechSynthesis.speak(utterance);
        }
    </script>
</body>
</html>

2
4
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
2
4