Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

作ったもの

親友(javascript製)

BestFriend.html
<!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部

VirtualFriend_Body.html
<body>

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

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

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

次にjavascript部

VirtualFriend_Brain.html
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の完成です。
friend.PNG

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

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

まとめ

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

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


  1. 親友…javascriptでは作れるが、リアルでは作成不可能な概念の事 

kizul
社会人3年目の初心者 https://twitter.com/kizul6
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした