音声認識は進んでいる
競馬で負けた時に作った勝負事の格言、せっかく作っても有効に使われたことが無く、それを改善するためにスマホアプリを作ろうとしています。
NOTE記事：なんで忘れるかなぁ俺の格言。それならつくる！《企画編①》
Qiita記事：芸術は爆発だ！私の頭もだ！やり場のない怒りを芸術の域に昇華させる
アプリです。「なんで忘れるかなぁ俺の格言。それならつくる！《企画編➁》
格言のような文章をパソコンではなくてスマホで手入力するのは苦手だなと思い、音声入力ツールを試しました。思ったより間違えずに聴き取って書き出してくれます。ソースコードを見ていたらこんな設定が。
'ja-JP'は言語コードといって日本語を表します。言語コードで検索すると一覧が出てきますが、世界には実に多くの言語があるものです。
音声認識の精度が原因ではない
日本語以外が試したくなり、'en-gb'［英語（イギリス）］に変えてやってみたところ、日本語とは比べ物にならないほど認識してもらえませんでした。実に恥ずかしい英語力。ちゃんと音声認識アプリに認めてもらえるよう、英語の発音を直さないといけません。とはいえ英会話教室に通うのも大げさだし･･･。
英語の発音上達アプリ
ということで英語の正しい発音を聴いて、それを出せるよう訓練するアプリを作りました。
まずは英単語を入力して正しい発音を聴いてください。そして赤いボタンを押下して発音しましょう。認識してもらえば話した英単語の画像が表示されます。自身のある方は最初から音声入力で構いません。cat や dog、Star等、簡単な単語が意外と難しかったりします。
【使ったもの】
・HTML、CSS、JavaScript
・CodePen、Vue.js、jQuery、Bootstrap、Netlify
・Pixabay（フリー画像素材）
・Web Speech API
Netlifyで公開中
解説
ソースコード
See the Pen 変な英語をしゃべっていませんか？ by Xedge748hagi (@Xedge748hagi) on CodePen.
Pixabay に登録して発行されたAPIキーをソースに埋め込む必要があり、上記のソースコードはそれを削除しています。
Bootstrap による画面レイアウト
Bootstrap で画面を作成しました。画面を12分割したグリッドシステムが画面設計をわかりやすくしてくれています。
ボタンも用意されたものの中から色付きのものを選びました。
Web Speech API
画面から入力された英語を this.speech で Speech Synthesis に受け渡して発声させます。
画像検索と結果表示
音声入力を文字に変えて画面に返すと同時に、認識した文字に関する画像を pixabay.com に検索にいきます。0～複数件の画面情報が返ってきますので JSON 形式で受け取り、プレビュー用の小さい画面のURL（previewURL）を取り出して gazou に設定します。gazou は div タグの集まりで、HTML側に送って表示されます。
最後に
関連する画像検索をしますので、英文ではなく英単語の発音練習になります。思わぬ単語と画像が返ってきますので面白いかと思います。パソコンよりはスマホで人目につかずに使いたいアプリだと思いますので、Bootstrap で画面を作ったのはよかったです。