コンテンツ
- 01.プロジェクトを開始します
- 02.コンテンツを追加する
- 03.結果を選択します
- 04.ラジオ2
- 05.テキストを表示する
- 06.最後のインターフェース
- 07.Javascriptを追加する
- 08.変動する結果
- 09.サポートされていますか？
- 10.認識を開始します
- 11.最終または暫定？
- 12.エラーの処理
- 13.話し始めます！
- 14.入力を取ります
- 15.クリックして停止します
- 16.テキストをクリアします
- 17.目的を追加する
- 18.総提出
- 19.新しいインターフェース要素
- 20.エントリを送信します
- 21.最終提出
過去数年間に多くの新しいAPIがウェブに追加され、ウェブコンテンツが多くのアプリと同じ種類の機能を持つことができるようになりました。比較的新しいAPIは音声認識APIです。これは、おそらくご想像のとおり、テキストをページへの入力として使用できます。サービスを開始して停止するには、クリックする必要があります。
これの良い例は、ユーザー間のアクセシビリティを許可し、クリックの代わりに音声入力を提供することです。分析の結果、モバイルブラウジングが多いことがわかった場合は、キーボードを使用するよりも携帯電話に話しかける方がはるかに簡単だと考えてください。
画面ベースのインターフェースは10年以内に消え始めるかもしれないという予測がありました。これは最初は空想科学小説のように聞こえるかもしれませんが、ユーザーがAlexaやSiriなどを介した入力としての音声にますます慣れてくると、これが入力方法として普及するのは当然のことです。ここでのチュートリアルでは、音声入力について理解し、それを使用してeコマースサイトに製品レビューを残します。
ファイルをダウンロードする このチュートリアルでは。
- 音声インターフェイスを設計するための8つのヒント
01.プロジェクトを開始します
プロジェクトファイルフォルダーから、コードIDEで「start」フォルダーを開き、「speech.html」ファイルを開いて編集します。プロジェクトのすべてのCSSは、speech APIの焦点ではないために記述されているため、ここに示すリンクを追加して、Noto Serif書体を取得し、CSSファイルをリンクします。
link href = "https://fonts.googleapis.com/css?family=Noto+Serif" rel = "stylesheet"> link rel = "stylesheet" href = "css / style.css">
02.コンテンツを追加する
この最初の要素は、画面上のすべてのコンテンツを保持するラッパーを用意することです。ここでの最初の要素は、SpeechAPIがブラウザーでサポートされているかどうかをユーザーに通知する非表示のメッセージです。これは、そうでない場合にのみ表示されます。次に、見出しは、後続のフォーム要素がメッセージに使用されることをユーザーに通知します。
div id = "wrapper"> span id = "unsupported">音声APIはサポートされていません/ span> h2>メッセージ：/ h2>
03.結果を選択します
Speech APIを使用する場合、コンテンツを表示する方法は2つあります。 1つは、ユーザーが話すのをやめ、「聞く」ボタンがクリックされたときにテキストが表示されることです。もう1つは、画面上に話されている単語を表示します。この最初のラジオボタンを使用すると、最終的な音声結果を表示できます。
div id = "typeOfInput"> span> Results：/ span> label> input type = radio name = Recognition-type value = final>最終スピーチ/ラベル>
04.ラジオ2
2番目のラジオボタンがここに追加され、これにより、ユーザーは話しているときに表示するテキストを選択できます。これらのラジオボタンは後でJavaScriptによって取得され、音声入力を制御するために使用されますが、今のところ、これによりユーザーはそれを制御するためのインターフェイスを持つことができます。
ラベル>入力タイプ=ラジオ名=認識タイプ値=中間チェック>話しているとき/ラベル> / div>
05.テキストを表示する
ユーザーがページに話しかけるテキストを画面に表示する必要があります。ここに、「transcription」のIDを持つテキスト領域が追加されます。これは、ユーザーのスピーチがここで終了するようにターゲットにされます。テキストを削除するためのクリアボタンもあります。
textarea id = "transcription" readonly> / textarea> br /> button id = "clear-all"> Clear Text / button>
06.最後のインターフェース
これで、最終的なインターフェイス要素が画面に追加されました。スピーチボタンはスピーチを有効または無効にするため、話す前にクリックする必要があります。もう一度クリックすると停止します。これは比較的新しいインタラクションであるため、下のログはユーザーに何をすべきかを示します。
div> div id = "speechButton"> / div> / div> div id = "log">クリックして話し始めます/ div> / div>
07.Javascriptを追加する
次に、body終了タグの前にscriptタグを追加します。これは、すべてのJavaScriptが使用される場所です。最初の2行は、一致するIDを持つページ要素を取得し、それらを変数に格納します。音声文字変換は、スピーチのテキスト結果です。ログは、その使用方法でユーザーを更新します。
スクリプト> vartranscription = document.getElementById（ ’transcription’）; var log = document.getElementById（ ’log’）; / script>
08.変動する結果
次のいくつかの変数を使用して、より多くのインターフェース要素がそれらにキャッシュされます。スピーチボタンはトグルになり、ユーザーはスピーチのオンとオフを切り替えることができ、ブール値のtrue / false変数によって監視されます。 [すべてクリア]ボタンを押すと、不十分な音声結果が削除されます。
var start = document.getElementById（ ’speechButton’）; var clear = document.getElementById（ ’clear-all’）;変数スピーキング= false;
09.サポートされていますか？
コードで最初に行うことは、この音声機能がユーザーのブラウザでサポートされているかどうかを確認することです。この結果がnullとして返される場合、ifステートメントは非表示のメッセージをスローし、同時に開始ボタンをインターフェイスから離して音声入力を停止します。
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition ||ヌル; if（window.SpeechRecognition === null）{document.getElementById（ 'unsupported'）。classList.remove（ 'hidden'）; start.classList.add（ ’hidden’）; } そうしないと {
10.認識を開始します
音声認識は、利用可能な音声認識の「その他」として開始されます。ラジオボタンのデフォルトとして、連続入力が開始されます。 「onresult」関数は、音声入力の結果を処理します。これは、文字起こしのテキストフィールドに追加されます。
var Recognitioner =新しいウィンドウ。音声認識（）; Recognitionr.continuous = true; Recognitionr.onresult = function（event）{transcription.textContent = ’’; for（var i = event.resultIndex; i event .results.length; i ++）{
11.最終または暫定？
ifステートメントは、ユーザーが話しているときにテキストを表示するか（暫定）、話し終えた後にのみ表示するか（最終）を確認するようになりました。暫定的な場合は、各単語が「+ =」でテキストに追加され、最後の単語はテキスト全体をそこにダンプするだけです。
if（event.results [i] .isFinal）{transcription.textContent = event.results [i] [0] .transcript; } else {transcription.textContent + = event.results [i] [0] .transcript; }}};
12.エラーの処理
ほとんどのJavaScriptAPIと同様に、発生する可能性のある問題をどう処理するかを決定できるエラーハンドラーがあります。これらは「log」divにスローされ、ユーザーにフィードバックを提供します。これは、ユーザーがインターフェースで何が起こっているのかを認識していることが不可欠だからです。
Recognitionr.onerror = function（event）{log.innerHTML = ’認識エラー：’ + event.message + ’br />’ + log.innerHTML; };
13.話し始めます！
ここでのイベントリスナーは、ユーザーがボタンをクリックして話し始めると開始されます。ユーザーが話していない場合は、ボタンの色が変わり、話が開始されたことを示します。話すための変数がtrueに設定され、「暫定」ラジオボタンがチェックされて、これがユーザーの入力選択であるかどうかが確認されます。
start.addEventListener（ 'click'、function（）{if（！speaking）{speaking = true; start.classList.toggle（ 'stop'）; Recognitionr.interimResults = document .querySelector（ 'input [name = "recogniti on- type "] [value =" interim "] '）。checked;
14.入力を取ります
「tryandcatch」ステートメントは音声認識を開始し、話し始める必要があることと、話し終わったら「もう一度クリックして停止する」ことをユーザーに通知します。キャッチはエラーを検出し、それを「ログ」divにスローして、ユーザーが何が間違っているのかを理解できるようにします。
{recognizer.start（）;を試してください。 log.innerHTML = ’今すぐ話し始めますbr />クリックして停止します’; } catch（ex）{log.innerHTML = ’認識エラー：br />’ + ex.message; }
15.クリックして停止します
これで、ユーザーがクリックして会話を停止すると、音声認識が停止します。話している間、ボタンは赤から緑に戻ります。ユーザーインターフェイスが更新され、サービスが停止したことがユーザーに通知されます。話す変数はfalseに設定され、ユーザーが再び話すことができるようになります。
} else {recognizer.stop（）; start.classList.toggle（ ’stop’）; log.innerHTML = ’認識が停止しましたbr />クリックして話します’;話す=偽; }}）;
16.テキストをクリアします
このセクションの最後のコードは、誤って解釈された場合に音声入力テキストを削除するためのクリアボタンです。ファイルを保存し、ブラウザでテストします。ボタンをクリックしてコンピューターに話しかけ、結果を確認することができます。
clear.addEventListener（ ’click’、function（）{transcription.textContent = ’’;}）; }
17.目的を追加する
実用的な例があるので、インターフェースに何らかの目的がある必要があるので、ユーザーがレビューを入力できるようにこれを作成しましょう。ページを保存し、「reviews.html」という新しい名前で[名前を付けて保存]を選択します。 div id = "wrapper">行の直後に次のHTML要素を追加します。
h1>製品レビュー/ h1> div id = "reviews"> / div>
18.総提出
前のコードはレビューを保持します。ユーザーは音声入力を送信する必要があるため、「クリアテキスト」ボタンの直後に送信ボタンを追加します。これはコードの28行目あたりにあります。次に、次のステップのためにJavaScriptに移動できます。
button id = "submit">レビューの送信/ボタン>
19.新しいインターフェース要素
Javascriptの上部に新しい変数を追加して、追加されたばかりの新しいインターフェイス要素への参照を保持します。これらは、ページの「レビュー」セクション内の画面に結果を送信して表示する方法を提供します。
var submit = document.getElementById（ ’submit’）; var review = document.getElementById（ ’reviews’）;
20.エントリを送信します
これで、ユーザーが送信ボタンをクリックしたときにここのコードが処理されます。これを「クリア」ボタンコードの直前に配置します。これはコードの88行目あたりにあるはずです。最初に、段落タグが作成され、その後、音声入力がこれに追加されます。その後、これは「レビュー」セクションに追加されます。
submit.addEventListener（ 'click'、function（）{let p = document.createElement（ 'p'）; var textnode = document.createTextNode（transcription.value）; p.appendChild（textnode）; review.appendChild（p）; let today = new Date（）; let s = document.createElement（ 'small'）;
21.最終提出
レビューがドキュメントにタイムスタンプされるように、日付が追加されます。最後に、各レビューがどこで終了するかを示す水平ルールが追加され、テキストがクリアされて新しい入力の準備が整います。ページを保存してテストします。これで、スピーチをレビューとしてページに送信できることがわかります。永続性を得るには、データベースを使用してこれらの結果を保存する必要があります。
textnode = document.createTextNode（today）; s.appendChild（textnode）; review.appendChild（s）; let hr = document.createElement（ ’hr’）; review.appendChild（hr）; transcription.textContent = ’’; }）;
この記事はもともとクリエイティブウェブデザインマガジンの286号に掲載されました ウェブデザイナー. ここで問題286を購入します または ここでWebDesignerを購読します.
