音声制御UIを構築する

Jan 25, 2026

操作方法

私たちは、最後の数年間で多くの新しいAPIを追加したのを見ました。これは、Webコンテンツが何らかの時間を過ごしていたのと同じ種類の機能を持つようになりました。比較的新しいAPIは音声認識APIであり、あなたがおそらく推測できるように、あなたはあなたのテキストをページへの入力として使うことを可能にします。クリックしてサービスを開始し、もう一度停止する必要があります。

このための素晴らしいケースは、ユーザー間のアクセシビリティを可能にし、クリックする代わりに音声入力を与えます。分析があなたがたくさんのモバイルブラウジングを持っていることを示すならば、それはキーボードを使うよりもあなたの電話に話すことがどれほど簡単であるかを考えてください。

スクリーンベースのインターフェースが10年以内に消え始める可能性があるという予測があります。最初は、これは科学のフィクションのように聞こえるかもしれませんが、ユーザーがAlexaとSiriの同義を通して入力としてのスピーチにますます快適になるので、それはこれが入力方法として蔓延するという理由を表します。ここでのチュートリアルはあなたがスピーチの入力をスピードアップしてからそれを使って製品レビューを任せるために使うでしょう eコマースサイト 。

ファイルをダウンロードしてください このチュートリアルのために。

音声インタフェースを設計するための8つのヒント

01.プロジェクトを開始します

Build a voice controlled UI: Start the project — それはすでに書かれているようにCSSを心配しないでください[Image：Web Designer]

[プロジェクトファイル]フォルダから、コードIDE内の[Start]フォルダを開き、編集する 'speech.html'ファイルを開きます。プロジェクトのすべてのCSSは、スピーチAPIの焦点ではありませんので、Noto Serifの書体を取得してCSSファイルをリンクするために、ここに表示されているリンクを追加します。

＆lt; link href = "https://fonts.googleapis.com/css?family=noto + serif" rel = "stylesheet"＆gt;

02.コンテンツを追加します

これの最初の要素は、私たちのスクリーン内容のすべてを保持するためのラッパーを持つことになるでしょう。ここでの最初の要素は、音声APIがブラウザでサポートされている場合にユーザーにユーザーに指示する隠されたメッセージになります。これはそうでない場合にのみ見られます。その後、見出しは、従うフォーム要素がメッセージに使用されることをユーザーに指示します。

 div id = "ラッパー"＆gt;

03.結果を選択してください

音声APIを使用する場合、コンテンツを表示する方法は2つあります。 1つでは、テキストがユーザーが話しているときに表示され、[リスニング]ボタンをクリックします。もう一方は、話し言葉として画面上の言葉を示しています。この最初のラジオボタンは、最終的な音声結果を示すことを可能にします。

04.ラジオ2

ここで2番目のラジオボタンが追加され、これにより、ユーザーが話すときに表示されるテキストを選択できます。これらのラジオボタンは後でJavaScriptによってピックアップされ、音声入力を制御するために使用されますが、これはユーザーがそれを制御するためのインタフェースを持つことを可能にします。

＆gt;
＆lt;入力型=無線名=認識型値=暫定チェック＆gt。あなたが話すように/ later＆gt;
＆lt; / div＆gt;

05.テキストを表示します

Build a voice controlled UI: Display the text — ユーザーのスピーチは 'Transcription' Text-Areaで終わります[Image：Web Designer]

ユーザーがページに話すテキストを画面に表示する必要があります。ここでは、「転写」のIDを持つテキスト領域が追加されています - これはユーザーのスピーチがここで終わるように対象となります。テキストを削除するための明確なボタンもあります。

 Textarea ID =「転写」readonly＆gt;
＆textarea＆gt;

06.最後のインターフェース

Build a voice controlled UI: The last interface — スピーチボタンをクリックするとスピーチ検出が開始されて停止します[Image：Web Designer]

最後のインターフェース要素が今すぐ画面に追加されます。スピーチボタンはスピーチを有効にして無効にするので、話す前にクリックする必要があります。もう一度クリックすると停止します。これは比較的新しい対話ですので、その下のログはユーザーに何をすべきかを伝えます。

07. JavaScriptを追加してください

これで、終了ボディタグの前にスクリプトタグを追加します。これはすべてのJavaScriptが行く場所です。最初の2行は、マッチングIDを持つページ要素をつかみ、それらを変数に格納します。転記は音声のテキスト結果です。ログに使用する方法でユーザーが更新されます。

＆lt;スクリプト＆gt。
var transcription = document.getElementByID（ 'transcription'）。
var log = document.getElementById（ 'log'）;
＆lt; / script＆gt;

08.変数結果

次のいくつかの変数を使用して、より多くのインターフェイス要素がそれらにキャッシュされます。スピーチボタンはトグルになり、ユーザーが音声をオン/オフに切り替えます。ブール値、true / false変数によって監視されます。 Clear-Allボタンは、不満足な音声結果を削除します。

 var start = document.getElementByID（ 'stephbutton'）;
var clear = document.getElementByID（ 'clear-all'）;
var skishing = false

09.サポートされていますか？

このコードがユーザーのブラウザでサポートされている場合は、コードが最初に行うことです。この結果がNULLとして戻ってきた場合、IFステートメントは隠しメッセージをスローし、同時にスタートボタンをインターフェイスから離して停止して音声入力を停止します。

 Window.SpeechRecognition = Window.SpeechRecognition ||
Window.WebKitspeechRecognition ||.
ヌル;
if（window.speechrecognition === null）{
Document.GetElementByID（ 'サポートされていません）。classlist.remove（' hidden '）;
start.classlist.add（ 'hidden'）;
{

10.認識を開始します

音声認識は、発話認識が利用可能であるための「他の」として開始されます。連続入力はラジオボタンのデフォルトとして開始されます。 'onResult'関数は音声入力の結果を処理します。これはTranscriptionのテキストフィールドに追加されます。

 var認識因子=新しいウィンドウ。
音声認識（）;
認識機器= TRUE;
Recognizer.OnResult =関数（イベント）{
transcription.textContent = '';
（var i = event.resultIndex; i <イベント。
結果。Length; i ++）{

11.決勝または暫定？

IFステートメントは、ユーザーが話しているとき（暫定的な）または話している後にのみテキストを表示したいかどうかを確認します（最終的な）。それが暫定的な場合、各単語は「+ =」を持つテキストに追加されますが、最後はテキスト全体をそこにダンプするだけです。

 if（event.results [i] .isfinalintal）{
transcription.textContent = event.Results  .transcript;
} そうしないと {
transcription.textContent + = event.results  .transcript;
}
}
;

12.エラーの取り扱い

ほとんどのJavaScript APIと同様に、発生する可能性のある問題をどうするかを自分の方法で決定できるようにするエラーハンドラがあります。これらは、インターフェイスで何が起こっている可能性があるかを認識していることが不可欠であるため、これらは 'log' divにフィードバックを与えます。

 Recognizer.OnError =関数（イベント）{
log.innerhtml = '認識エラー：' +
Event.Message + '＆lt; br / gt;' + log.innerhtml;
;

13.話し始める！

ここでのイベントリスナーは、ユーザーがボタンをクリックして話し始めると開始されます。ユーザーが話していない場合、ボタンがShow Show Show Show Show Show Show Show Show Show Show Show TranvalsはTrueに設定され、「interim」ラジオボタンが入力のユーザーの選択であるかどうかを確認します。

 start.addeventListener（ 'click'、function（）{
もし（！スピーチ）{
話す= true;
start.classlist.toggle（ 'stop'）;
Recognizer.interimResults =文書。
QuerySelector（ '入力[name = "認識）
on-type "] [value =" interim "] '）。チェックしました。

14.入力を受け取る

'try ang catch'ステートメントは、音声認識を開始し、彼らが話し始めるべきであること、そして彼らが完了したときにそれを使うべきであることをユーザーに伝えます。キャッチはエラーを拾い上げて、それを「ログ」のDIVに投げることができ、ユーザーは何が間違っている可能性があるかを理解できるようになります。

 {
Recognizer.Start（）;
log.innerhtml = '今すぐ発言します
＆lt; br / gt;クリックして停止する。
キャッチ（EX）{
log.innerhtml = '認識エラー：
＆lt; br / gt; ' + ex.message。

15.停止します

ユーザーが通話を停止するようにクリックすると、音声認識が停止されます。ボタンは話しながら赤から緑に戻ります。ユーザは、サービスが停止したことをユーザに知らせるように更新される。話す変数はfalseに設定され、ユーザーに再び話す準備ができています。

}} {
Recognizer.Stop（）;
start.classlist.toggle（ 'stop'）;
log.innerhtml = '認識が停止しました
＆lt; BR /＆GT;クリックするとクリックしてください。
話す= false;
}
}）;

16.テキストをクリアします

Build a voice controlled UI: Clear the text — クリアボタンは誤って解釈された音声を取り除く[Image：Web Designer]

このセクションの最後のコードは、誤って解釈されている場合には、音声入力テキストを削除するための単なる明確なボタンです。ファイルを保存してブラウザでこれをテストします。ボタンをクリックしてコンピュータに話し、結果を確認できます。

 clear.addeventListener（ 'click'、function（）{transcription.textContent = '';
}）;）

17.目的を追加します

さての例があるように、インターフェースの目的があるため、ユーザーがレビューを入力できるようにしましょう。ページを保存してから、「レビュー.html」の新しい名前で保存を保存します。

 製品レビュー＆lt; / h1;
＆lt; div id = "レビュー"＆lt; / div＆gt;

18.提出総額

Build a voice controlled UI: Total submission — 送信ボタンは入力された音声を送信します[Image：Web Designer]

前のコードはレビューを保持します。ユーザーは自分の音声入力を送信する必要があるため、[テキストのクリア]ボタンの直後に[送信]ボタンを追加します。これはコードの28行目の回線を移動します。次のステップでJavaScriptに移動することができます。

 <ボタンID = "SUBMING" CLASS = "BUTTION"＆GT;レビューを送信する＆lt; / button＆gt;

19.新しいインターフェース要素

JavaScriptの上部に新しい変数を追加して、追加された新しいインターフェイス要素への参照を保持します。これらは、ページの「レビュー」セクション内の画面上の結果を送信して表示する方法を提供します。

 var submit = document.getElementById（ 'submit）;
varのレビュー= document.getElementByID（レビュー '）;

20.エントリーを送信してください

ここでのコードは、ユーザーが送信ボタンをクリックしたときに処理され、これを「クリア」ボタンコードの直前に配置します。これはコードの88行目の回線を移動します。まず、段落タグを作成し、その後音声入力を追加します。これは「レビュー」セクションに追加されます。

 submit.addeventListener（ 'click'、function（）{
p = document.createelement（ 'p'）を;
var textnode = document.CreateTextNode.
（Transcription.value）。
p.appendchild（TextNode）;
レビュー;おしゃべり（P）;
今日= new date（）;
s = document.createlement（ 'small'）を;

21.最後の提出物

Build a voice controlled UI: Final submission — 送信されたスピーチを保存したい場合は、データベースを使用する必要があります[Image：Web Designer]

レビューがドキュメントにタイムスタンプされるように日付が追加されます。最後に各レビューが終了した場所を表示するために水平規則が追加され、その後テキストは新しい入力の準備ができています。ページを保存してこれをテストします。あなたは今すぐあなたのスピーチをレビューとしてページに送信できることがわかります。永続性のためには、データベースを使用してこれらの結果を保存する必要があります。

 TextNode = Document.CreateTextNode（今日）。
s.appendchild（TextNode）;
レビュー..appendchild（s;
hr = document.createelement（ 'hr'）;
レビュー; appendchild（hr）;
transcription.textContent = '';
}）;

この記事はもともとCreative Web Design Magazineの第286号に発行されました ウェブデザイナー 。 ここに問題286を購入してください または ここでWeb Designerを購読してください 。

関連記事：

最高のJavaScript APIの14の14
AI-Powered Chatbotを構築します
5 2019年の新興UXトレンド

音声制御UIを構築する

01.プロジェクトを開始します

02.コンテンツを追加します

03.結果を選択してください

04.ラジオ2

05.テキストを表示します

06.最後のインターフェース

07. JavaScriptを追加してください

08.変数結果

09.サポートされていますか？

10.認識を開始します

11.決勝または暫定？

12.エラーの取り扱い

13.話し始める！

14.入力を受け取る

15.停止します

16.テキストをクリアします

17.目的を追加します

製品レビュー＆lt; / h1; ＆lt; div id = "レビュー"＆lt; / div＆gt;

18.提出総額

19.新しいインターフェース要素

20.エントリーを送信してください

21.最後の提出物

操作方法 - 最も人気のある記事

カスタムスラックボットを作成する

vue.jsを使ってアプリを作成する方法

映画館4Dのコンセプトアートをモデル化する方法

アフィニティデザイナの資産を始めようとする

CSSグリッドでレスポートレイアウトを作成する

印象派のような塗料

ブランディングプロセシェア彼らはブランドの声を傷つけています

3Dで水彩風景を作成するための11のヒント

カテゴリ