Web Speech APIを使ってみた

どうもノボです。
最近Web Speech APIを触ってみる機会があったので、ちょっとしたメモアプリを作ってます。

このアプリを参考にしています。(こんなのができたらいいなぁ、、
https://efcl.info/2022/02/10/voicod/

作ったものはこちらになります。(デプロイはまだです、、
https://github.com/Hitoshi-Noborikawa/memo-app

Web Speech APIとは?

Web Speech APIは音声認識と音声合成をブラウザ上で使用することができます。https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API
デモはこちらhttps://github.com/mdn/web-speech-api

使い方

ローカルで立ち上げてください。dockerを使っています。

1. Startボタンを押すと音声認識が始まります。何か話すと読み込まれます。

f:id:Nobox:20220221215710p:plain
話してみた

2. OKボタンを押すと、上のテキストエリアに表示されます。

f:id:Nobox:20220221215536p:plain
上に表示

3. ,を入力すると、が文末に追加され、.を入力すると文末に。が追加され、改行されます。

f:id:Nobox:20220221215956p:plain
,と.を入力してみる

4. OKを押すとこんな感じになります。

f:id:Nobox:20220221220224p:plain
改行されました

今は少しの機能しかありませんが、メモアプリとしてメモを保存できたりファイル分けしたりサードパーティーと連携したりできたらいいなと思ってます。(デザインも頑張ります、、!

今回はこれで。読んでくれてありがとうございます。