みなさん、こんにちは。
さて今回は、音声をブラウザで読み上げるためのスクリプトを紹介していきます。
音声をブラウザで読み上げさせると言っても、javascriptのAPIを使うことによって簡単に実装できます。
具体的にいうと、「Web Speech Synthesis API」というものです。
音声読み上げをするには、「音声合成(Speech Synthesis)技術」というものを用います。
ちょうど「Siri」や「Google Home」などで使われているので、結構身近に感じられるのではないでしょうか。
また今回使うプログラムで再生された音声は、「人間的な音声」というよりは、Siriなどの「少しロボット的な音声」で再生されます。
抑揚が少し不自然な感じと言えばいいのでしょうか？
まあ、それでも人間が理解するには十分ですし、問題なく使えるので早速やっていきましょう！
目次
ブラウザで音声を読み上げさせる方法
ブラウザ(画面)の描画を作成
ブラウザに表示するので、ある程度のUIは整えていきます。
あまり複雑ので、気軽にいきましょう。
また今回作成するファイル名は「sample.html」というファイルにします。みなさんも、拡張子だけ気をつければ名前は自由です。
このように、フォームに読み上げたい文字をセットするという単純な構造です。あとは、ボタンタグで制御するだけです。
【javascript】Web Speech Synthesis APIを使ったスクリプト作成
次は、音声合成を扱うスクリプト部分を追加していきます。
ポイントは、speak関数の方です。こちらが音声合成を行うAPIで、inputタグのvalue値を読み上げるスクリプトになっています。
ちなみに、sleep関数も自作して使っていますが、これは「speakボタン」をクリックした瞬間に音声が再生され始めてしまうので、聞き取りづらいといったことを防ぐために作りました。
いらないと持った方は、省いてもOKです。
サンプルのプログラムでは、2000msなので2秒で設定しています。
実際に使ってみる
ここまで終わったら、あとはローカルサーバーを立ててブラウザから実行するのみです。
ターミナルから、以下のコマンドを実行してください。
このコマンドを実行すると、Rubyの標準ライブラリであるWEBrickが立ち上がり、HTTPサーバが簡単にたてられます。
そうしたら上に記載されているURLにブラウザからアクセスしてみてください。
また、自分で「sample.html」以外のファイル名で作成している方は、URLのファイル名の部分を適宜編集してからアクセスしてください。
いかがでしょう？うまくアクセスできましたか？
アクセスできたら、フォームの文字列を編集して色々な音声を入力したり、pitchを変えたりと色々試せます。
ここまで、お疲れさまでした。
まとめ
今回は音声合成技術というものを簡単に試せる方法をまとめてきました。
まだまだ機械音であることは隠しきれませんが、音声を読み上げるということに関しては、十分なものだったのではないでしょうか？
さらに、声の抑揚や自分の声質に似せるといったことをやろうとすると、他にも色々な技術を使うことになります。
音声合成の歴史はCGなどと比べると短めなので、追ってみると面白いかもしれません。
本日も読んでいただき、ありがとうございました。
また、音声合成とセットで注目されているのが、音声認識技術です。
音声認識技術もこの際カジっておこうという方は、以下にまとめましたのでどうぞ！
コメントを残す