【Javascriptで作れる!】ブラウザで音声認識して文字に起こすプログラムを紹介

Not image

こんにちは、みなさん。

今日は、音声認識から文字起こしをするプログラムついてまとめていこうと思います。

音声認識は、ここ近年急速に身近に感じられるようになりました。

iphoneのSiriを始め、Amazon EchoやGoogle Homeなど音声でデバイスを操作する機器が世界的に普及しているのは、火を見るよりも明らかです。

これからもさらに、音声認識を使った商品やサービスは増え続けていくことでしょう。

しかし今回 着目する点は、音声認識を使った商品やサービスではなく音声認識技術そのものです。

人間の声を認識してデバイスの入力装置にするには、より精度の高い認識技術が必要になります。

その研究はかなり昔から行われて来まして、その結果今の商品やサービスが生まれたのです。

その研究は1900年初頭から研究がされていました。この点から見ても、その音声認識の難易度の高さがわかります。

さて前置きはこの辺にして、早速音声認識をブラウザで実装する方法をまとめていこうと思います。

今回使う言語は、javascriptです。それと少しのhtmlなどです。ブラウザが動作環境なので、多少弄る程度です。

ポイントは「Web speech API」というjavascriptのAPIを使うことなので、意外とサクッとできてしまいます。

これも、先人の恩恵です。ありがたく使わせていただきます。

ブラウザで音声認識し文字に起こす手法

HTMLでブラウザ上の描画を作る

まず最初は、HTMLで画面の描画をある程度整えましょう。

フロントは、極めようと思うと一生終わらないので、javascriptを読み込むために必要な「id」要素の設定などごく単純な機能のみにして、サクッと次の段階に進みましょう。

今回は、「sample.html」ファイルというものを作って、その中にHTMLとJavascriptを書いていこうと思います。

上のように、buttonタグの中の「start_btn = id」というところがトリガーになって、音声認識を開始できるような機能を実装しています。

他は「content = id」という部分に音声認識された文字が、文字起こしされて表示されるようにしていきます。

HTMLの方はこのくらいで、迷う部分も少ないかと思います。

JavascriptのWeb Speech APIを使って音声認識実装

次は、今回の話の核になるJavascriptの「Web Speech API」です。

これは先ほどのHTMLファイルのjsを挿入するというところに追加していく形にしてください。

「speech.onresult」という部分において、音声で認識したものをブラウザに描画しています。

また、上のコードを「speech.start」で囲むことで、永続的に音声認識をさせる仕組みになっています。

実際に使う前の諸準備

さて、これでファイルの準備等は完了です。

あとはローカルサーバーを立ち上げて、実際に音声認識で文字起こしされるかを確認するだけです。

と、その前にやることが二つあります。

諸準備1:PC自体のマイク入力を設定する

それは、PC自体のマイクを受け入れ態勢に設定することです。

いくらブラウザ上で、音声認識の準備が整っていても、PCの音声読み込みのマイクがONになっていないことには、どうにもなりません!

「システム環境設定.app」を立ち上げて、その中から「サウンド」という項目を見つけてください。スピーカーのイメージです。

「サウンド」をクリックしたら、「入力」という項目をクリックしてください。

クリックすると「入力音量」を設定する「つまみ」のようなものがあるので、それを最大にしてください。

こうすることによって、PC自体のマイク入力の受け入れ態勢が整います。

諸準備2:ローカルサーバーを立ち上げる

最後にローカルサーバーを立ち上げて、ブラウザを見れる体制を作りましょう。

これは意外と簡単です。

「ターミナル.app」または、お使いのコマンドラインツールを開けて、HTMLとJavascriptを書いたファイルのあるディレクトリにまで移動してください。

同じディレクトリに移動したら、以下のようなコマンドを入力してください。

こうすることで、Ruby標準ライブラリのWebrickが立ち上がり、簡易的なHTTPサーバーを構築することができます。

これでブラウザから、見ることができるようになります。

あとは使ってみるのみです!

実際に使ってみる

上でローカルサーバーを立ち上げるコードを紹介しましたが、そこに乗っているURLをブラウザのURLバーに入れて検索してください。

ちなみに今回は、「sample.html」というファイルで作成したという前提で、URLを指定しているので、「sample.html」以外のファイル名で作成した方は、適宜読み替えてURLを叩いてみてください。

どうでしょうか?

画面中央に、「start」というボタンが表示されていますか?

表示されていたら、クリックして音声認識を始めてみてください。ブラウザに「マイクを許可するか?」と言ったことを聞かれたら、「許可」して進んでみてください。

結構早く喋っても、認識されるのではないでしょうか!?

認識されたら、成功です!お疲れさまでした。

まとめ

今回は、JavascriptのAPIである「Web Speech API」を使って、ブラウザから音声認識をして、さらにそれを文字に起こすというプログラムを作ってみました。

昨今の音声認識による商品やサービスの躍進を、さらに身近に感じることができたのではないでしょうか?

音声でのデバイスの制御は、これまでのITデバイスより直感的なので敷居が低く、子供から老人まで扱えるインターフェースだと思います。

したがって、これからの音声制御によるサービスや商品は、さらに拡大していくと思います。

それらを便利に使うためにも、今から色々と遊んでおくのもいいかもしれません!

今回も読んでいただき、ありがとうございました。

また音声認識も注目されていますが、「音声合成」という分野もホットな話題です。

この機会にセットでやってしまいたい方は、以下にまとめてみたので参考にしてみてください。

【javascriptで実装!】Web Speech Synthesis APIを使ってブラウザで音声読み上げをしよう

2018.12.27

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です