BETA

英文を繰り返し読み上げてくれる親友をjavascriptで作った

投稿日:2019-03-31
最終更新:2019-03-31
※この記事は外部サイト(https://qiita.com/kizul/items/e5ce61cfa0e4...)からのクロス投稿です

作ったもの

親友(javascript製)

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="UTF-8">  

        <script>  
            function Speech(){  
                // >定数  
                const loadvoice = "Google US English"  

                // >読み上げ設定諸々  
                var speechinfo;  
                var voicedata;  
                var voicedatalist;  
                window.speechSynthesis.onvoiceschanged = VoiseLoad;    //音声ロードが行われると、ここにで設定された関数が呼び出される  

                // >読み上げモード制御  
                var speakmode = 0;    //0…停止中 1…読み上げ中  
                var buttontxt = ["しゃべる","黙れ!"];  

                // >HTML上コンポーネントの設定  
                var btn = document.getElementById("speech");  
                var txt = document.getElementById("speektxt");  
                btn.onclick = onclick;  

                // >ボタンをクリックしたときに格納される、読み上げる文章  
                var speechtext = "";  


                // >押された時の状態によって読み上げ/読み上げ停止を行う  
                function onclick(){  
                    speakmode ^= 1;  

                    if(speakmode == 1){  
                        speechtext = txt.value;  
                        VoiceReset();  
                        window.speechSynthesis.speak(speechinfo);  
                    }else{  
                        window.speechSynthesis.cancel(speechinfo);  
                    }  

                    btn.value = buttontxt[speakmode];  

                }  

                // >読み上げが終わった後、再度speakを呼び出しリピートする  
                function repeat(){  

                    // cancelされた後に呼び出されていたら処理しない  
                    if(speakmode == 1){  
                        VoiceReset();    //firefoxだと一度リセットしないと読み上げてくれない  
                        window.speechSynthesis.speak(speechinfo);  
                    }  

                }  

                // >読み上げ情報のリセット  
                function VoiceReset(){  
                    speechinfo = new SpeechSynthesisUtterance();  

                    if(voice) speechinfo.voice = voice;  
                    speechinfo.volume = 1.0;  
                    speechinfo.rate = 1.0;  
                    speechinfo.lang = "en-US";  
                    speechinfo.pitch = 1.0;  
                    speechinfo.text = speechtext;  

                    speechinfo.onend = repeat;  
                }  

                // >音声データのロードを行う  
                function VoiseLoad(){  
                    voices = speechSynthesis.getVoices();  
                    voice = voices.find(function(voice){return voice.name == "Google US English"});  
                }  

                VoiseLoad();  

            }  
        </script>  

    </head>  

    <body>  

        <p>  
            【読み上げさせる文章】<br>  
            <input type="text" id="speektxt">  
        </p>  

        <input type="button" id="speech" onclick = "" value="しゃべる">  
        <script>Speech();</script>  
    </body>  

</html>  

javascirptWebSpeechAPIを使って作りました。
こちらで動かすことが出来ます。
動作確認済ブラウザ:Google Chrome,Firefox(windows)

ここから下は親友を作るまでの涙ぐましい奮闘記
もとい駄文の塊なので、興味のある物好きな方以外につきましてはここでこの記事は終了となります。

もしソースコードに突っ込み所などがあれば是非マサカリを投げていただければ幸いです。
ここまで読んで頂きありがとうございました。

参考にさせて頂いた記事


                                    糸冬
                                ---------------
                                制作・著作 N〇K








奮闘記

では成果を発表しプレッシャーから解放されたところで、親友^1が完成するに至ったまでの経緯と親友^1の紹介を書き連ねていこうと思います。

きっかけ

私は寂しかった、仕事から帰り家に辿り着くといつも一人、PCを開き画面をただただ見つめては過ぎ去っていく日々…
誰かに愛されたかった、心の通じ合える仲間が欲しかった、本音で語り合える仲間が欲しかった…

いつも傍にいて

共に本音で語り合い

時にはケンカしながらも

明日へ向かって

共に切磋琢磨し

共に助け合える

そんな親友が欲しかった…


ところで話は変わるんですが。
プログラミングをやっていると知らない英単語が出てくる事ってよく有りますよね?有りますよね?
そういう時って大概ググってその場は解決するんですけど、それだけだと頭に定着せず数週間後にまた繰り返すって事よく有りませんか?

そこで、作業中に出てきた英語を調べて、ついでにそれを無限に読み上げてくれる親友^1を作成して、そのスピーチを作業用BGMにすれば少しは定着するのでは?と考え早速作りました。

なぜWebSpeechAPI?

  • 楽そうだったから : 8割
  • javascriptいじりたい : 1割
  • その他 : 1割

親友^1の紹介

きっかけを話したところで、次に簡単な紹介に入らせていただきます。

まずはHTML部

<body>  

    <p>  
        【読み上げさせる文章】<br>  
        <input type="text" id="speektxt">  
    </p>  

    <input type="button" id="speech" onclick = "" value="しゃべる">  
    <script>Speech();</script>  
</body>  

読み上げさせる文章の入力欄と読み上げ開始のボタンを配置しているだけです。
センスの欠片も無い不愛想な親友^1ですが、一度英語を喋らせればとてつもなくハイレベルなセンスを発揮してくれるでしょう(多分)。

次にjavascript部

function Speech(){  
    // >定数  
    const loadvoice = "Google US English"  

    // >読み上げ設定諸々  
    var speechinfo;  
    var voicedata;  
    var voicedatalist;  
    window.speechSynthesis.onvoiceschanged = VoiseLoad;    //音声ロードが行われると、ここにで設定された関数が呼び出される  

    // >読み上げモード制御  
    var speakmode = 0;    //0…停止中 1…読み上げ中  
    var buttontxt = ["しゃべる","黙れ!"];  

    // >HTML上コンポーネントの設定  
    var btn = document.getElementById("speech");  
    var txt = document.getElementById("speektxt");  
    btn.onclick = onclick;  

    // >ボタンをクリックしたときに格納される、読み上げる文章  
    var speechtext = "";  


    // >押された時の状態によって読み上げ/読み上げ停止を行う  
    function onclick(){  
        speakmode ^= 1;  

        if(speakmode == 1){ //1. 読み上げ開始  
            speechtext = txt.value;  
            VoiceReset();  
            window.speechSynthesis.speak(speechinfo);  
        }else{ //3. 読み上げ終了  
            window.speechSynthesis.cancel(speechinfo);  
        }  

        btn.value = buttontxt[speakmode];  

    }  

    // >読み上げが終わった後、再度speakを呼び出しリピートする  
    function repeat(){  
        if(speakmode == 1){ //2. もう一度読み上げ  
            VoiceReset();    //firefoxだと一度リセットしないと読み上げてくれない  
            window.speechSynthesis.speak(speechinfo);  
        }  

    }  

    // >読み上げ情報のリセット  
    function VoiceReset(){  
        speechinfo = new SpeechSynthesisUtterance();  

        if(voice) speechinfo.voice = voice;  
        speechinfo.volume = 1.0;  
        speechinfo.rate = 1.0;  
        speechinfo.lang = "en-US";  
        speechinfo.pitch = 1.0;  
        speechinfo.text = speechtext;  

        speechinfo.onend = repeat;  
    }  

    // >音声データのロードを行う  
    function VoiseLoad(){  
        voices = speechSynthesis.getVoices();  
        voice = voices.find(function(voice){return voice.name == "Google US English"});  
    }  

    VoiseLoad();  

}  

読み上げる際の手順を軽く説明すると

  1. ボタンクリックで読み上げ開始(onclick)
  2. 読み上げ終わったらもう一度読み上げ(repeat)
  3. もう一度ボタンクリック終了(onclick)

となっています。

また、読み上げる前の初期化に関しては、上記した参考記事の内以下の物を参考にしました。
詳しくはこちらの方を参照して頂ければ分かりやすいかと思われます。
Web Speech Synthesis API(音声合成API)で遊んでみた - Qiita
簡単Javascript & jQueryでテキスト読み上げ - Qiita

SpeechSynthesisとSpeechSynthesisUtteranceに関してはこちらに
Web Speech APIの実装 前編 Speech Synthesis API
SpeechSynthesis(MDN Web Docs)
SpeechSynthesisUtterance(MDN Web Docs)

てなわけで、この二つをフュージョンさせると親友^1の完成です。

地味な服装ですね。では早速を喋らせてみましょう。

ちゃんと喋ってくれてます
しゃべる→黙れ!に変わったボタンをポチればすぐさま静かになってくれます。

まとめ

一度頼むだけで何度も何度も英語を発音してくれる親友^1が完成しました。いやぁ友情って素晴らしい!
みんなもWebSpeechAPIで親友^1作ろうね!

メロスとWebSpeechAPIゎ……ズッ友だょ……!!

おまけ

クロス投稿とgithub.io初めてでwktkしましたまる

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@kizulの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!