Webブラウザの読み上げ機能「Web Speech API」のお話

クリエイティブの與世山です。
前回は、Web制作の入門編のチップスをご紹介しましたが、今回は新しいJavascriptの技術「Web Speech API」のお話をします。

以前からブラウザ上のテキストを読み上げる技術はいろいろありました。読み上げブラウザなるものもありますし、今ではソフトやスマフォのアプリなども多くあります。今回紹介したい技術『Web Speech API』は、WebブラウザのJavaScript APIの一つです。詳しくは下記の引用をご覧ください。

引用文
https://www.mitsue.co.jp/knowledge/blog/frontend/201611/04_1421.html

Web Speech APIとは、Speech API Community Groupによって策定されたJavaScript APIの一つで、Webブラウザにおけるテキストデータの音声出力や、音声認識による入力を可能にします。
音声認識で有名なiOSにおけるSiriや、Androidなどに搭載されている音声検索および、Google Speech API、Cortanaなど、これらに近しい機能をJavaScriptとブラウザだけで実装することができます。

テキストの読み上げだけではなく音声出力まで考えた規格というところがすごいです!また、サーバサイドの技術や難しいプログラムではなく、JavaScriptとブラウザだけで実装できるところもすごいですね!

私の興味は、HTMLに記述したテキストの読み上げなので、音声入力は下記のサイトのデモをお試しください。なかなかおもしろいです。

URL
https://www.google.com/intl/ja/chrome/demos/speech.html

さて!今回の目的は、実際に「Web Speech API」の技術を使って、ブラウザの文字の読み上げる!なので作ってみました。
細かい話をすると長くなってしまうので、最後に関連リンクを記載していますので参考にしてください。すいません。

「寿限無(じゅげむ)」をしゃべらせる

ということで!実際にブラウザにしゃべらせてみたのが下記のURLです!

「寿限無(じゅげむ)」Web Speech API demo

後は、各ブラウザで実行できるかが問題です。読み上げを実行するプロパティ「speechSynthesis」が、どのブラウザに対応できてるか調べてみました。

寿限無

「Can I use」

Edge、Firefox、chrome、Safari、Opera、Safari on iOSの最新版では実行可能です。
残念なのはAndroid Browserはまだ対応していないようです。

もしかすると、ブラウザ越しにキーボードを使わず音声でテキストを入力し、メールを送信することが一般化するかもしれません。なんだかちょっと近未来感があって楽しいです。今後、何かの機会に使ってみたい技術です。

関連リンク

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

何でもお気軽にお問い合せください。

お問い合せはこちら