← 一覧へ

やってみようマイクを押すと、話しているときの様子を再現します

入力フォームメジャー(よく見る)

音声入力(波形)

Voice Input / Audio Waveform

マイクを押して話すと、声に合わせて波形が動き、話した言葉が文字になる。

別名音声入力マイク入力音声認識波形アニメーションボイス入力

どこで使われている?

よく見かける場所
Googleアシスタント、Siri、Google検索、カーナビ
使うとよい場面
運転中や手がふさがっているとき、文字を打つのが大変なとき
避けたい場面
静かな場所で使うことが多いサービスの唯一の入力方法

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「音声入力(波形)(Voice Input / Audio Waveform)」を実装してください。

動き:マイクボタンを押すと赤く光って「聞き取り中…」と表示し、声の大きさに合わせて縦棒の波形を上下させる。話し終わったら認識した文字を入力欄に入れ、もう一度押すと止める。

使う部品:Web Speech API(SpeechRecognition)
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

WebサイトならWeb Speech API(SpeechRecognition)
iPhoneアプリならSpeech フレームワーク(SFSpeechRecognizer)
AndroidアプリならSpeechRecognizer
Flutterならspeech_to_text パッケージ
React Nativeなら@react-native-voice/voice