今更だけど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

"Can I use" provides up-to-date browser support tables for support of front-end …
caniuse.com

Speech Synthesis API

"Can I use" provides up-to-date browser support tables for support of front-end …
caniuse.com

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

今更だけどSpeech Recognition API(音声認識)とSpeech Synthesis API(読み上げ機能)をいじってみる
Web Speech API の SpeechRecognition インターフェイスは、認識サービスの制御インターフェイスです。これは、認識サービスから送信さ…
developer.mozilla.org
今更だけどSpeech Recognition API(音声認識)とSpeech Synthesis API(読み上げ機能)をいじってみる
Web Speech API の SpeechSynthesis インターフェイスは、speech サービスのための制御インターフェイスです。これは、端末で利用…
developer.mozilla.org

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

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

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

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

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

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

"Can I use" provides up-to-date browser support tables for support of front-end …
caniuse.com