バッティングスコアに機能を追加

この前記事で作成したアプリの機能を充実させるということで、より一層かっこいい感じにしようと思う。

今回は、かっこよく英語で語らうようにしてみた。

完成作品

と、いうことで、打撃成績を”追加”したら、
「good job.Always put your best foot forward.（訳：お疲れ様。いつもベストを尽くしていこう）」
と言ってくれるようにした。

ソースコード

See the Pen 打撃成績表en by long66tail (@long66tail) on CodePen.

追加した発話機能

まずは、HTMLにボタンを押したときに発話するための「click="say"」を追加。

 <div class="column">
      <button class="btn btn-primary" v-on:click="addNewItem" @click="say">追加</button>
 </div>

そして、発話のため"say"の機能を追加。
この時、言語設定の箇所を'en-US'とした。（'ja-JP'で英語を話させると残念な感じになる。）
ちなみに音声認識の機能も構築することが可能であるため、日本語で音声認識や発話をさせたいときは、'ja-JP'にする必要がある。

    mounted() {
    // 音声認識の準備
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition || null;
    this.recog = new SpeechRecognition();
    // this.recog.lang = 'ja-JP';
    this.recog.lang = 'en-US';
    this.recog.interimResults = false;
    this.recog.continuous = false;
      
    // 発話の準備
    this.speech = new window.SpeechSynthesisUtterance();
    this.speech.lang = 'en-US';
    window.speechSynthesis.onvoiceschanged = () => {
      const voices = window.speechSynthesis.getVoices();
      this.speech.voice = voices.find(voice => voice.lang == 'en-US');
      console.log(this.speech.voice);
    };
  },

//中略
    async say() {
      return new Promise((res) => {
      // this.speech.text = this.message;
        this.speech.text = "good job.Always put your best foot forward."
        this.speech.onend = () => res();
        speechSynthesis.speak(this.speech);
      });
    },

感想

参考となるようなCodepenはこちら。
こういった参考を見つけることで、自力で作り込まなくても音声を発話させることが出来た。

今回のアプリには不要だと思ってつけなかったが音声認識をさせることも可能で、例えばアプリと対話するとか音声で動かすとか、そういったものが出来るようになるため、アプリによっては非常に便利だと思う。

興味のある人は、実際に確認できるCodepenを見つけたので試してみて欲しい。