今更だけどSpeech Recognition API(音声認識)とSpeech Synthesis API(読み上げ機能)をいじってみる

今更だけどSpeech Recognition API(音声認識)とSpeech Synthesis API(読み上げ機能)をいじってみる

2021年8月22日
知恵
Pocket

とりあえず、音声APIを使って作ったページです。

音声読み上げ

音声読み上げツールです。
zaitakukinmu.com

左ペインに音声入力で文字を入力するか、コピペ、キーボードで入力した文字列を

右のしゃべるボタンを押すと読み上げるものになります。

こちらは、HTML + CSS + JavaScriptだけで構成されています。(API等使用していません)

iOSの場合は、Speech Recognition APIが動作しないので諦めました。

can i use見ると、14.5-14.7で使えるようですが実際動作しませんでした。

そのため、iPhoneでアクセスする場合は、ボタンを非表示にしています。

Speech Recognition API

"Speech Recognition API" | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser …
caniuse.com

Speech Synthesis API

"Speech Synthesis API" | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser …
caniuse.com

APIの詳細については、以下を確認ください。

今更だけどSpeech Recognition API(音声認識)とSpeech Synthesis API(読み上げ機能)をいじってみる

SpeechRecognition - Web API | MDN

SpeechRecognition はウェブ音声 API のインターフェイスで、…
developer.mozilla.org
今更だけどSpeech Recognition API(音声認識)とSpeech Synthesis API(読み上げ機能)をいじってみる

SpeechSynthesis - Web API | MDN

Web Speech API の SpeechSynthesis インターフェイ…
developer.mozilla.org

読み上げの方は、再生速度、高音低音が切り替えられ、リピートすることも可能です。

実装の詳細は、ソース表示から確認ください。

ここに、DeepLのAPIを噛ませれば、Google翻訳ができあがります。(作る意味ないですが)

入力した文字をスピード上げて読み上げすれば、文章の確認とか捗るかなとか考えたりもしますが

なにかのサービスに役立つようなイメージがわきません。。。。

can i useのnewsを見ておくと、新しい機能が実装されるのを早くキャッチアップできるので良いかもです。

Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser …
caniuse.com