どうもノボです。
最近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](https://cdn-ak.f.st-hatena.com/images/fotolife/N/Nobox/20220221/20220221215710.png)
2. OKボタンを押すと、上のテキストエリアに表示されます。
![f:id:Nobox:20220221215536p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/N/Nobox/20220221/20220221215536.png)
3. ,を入力すると、が文末に追加され、.を入力すると文末に。が追加され、改行されます。
![f:id:Nobox:20220221215956p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/N/Nobox/20220221/20220221215956.png)
4. OKを押すとこんな感じになります。
![f:id:Nobox:20220221220224p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/N/Nobox/20220221/20220221220224.png)
今は少しの機能しかありませんが、メモアプリとしてメモを保存できたりファイル分けしたりサードパーティーと連携したりできたらいいなと思ってます。(デザインも頑張ります、、!
今回はこれで。読んでくれてありがとうございます。