コアポイント
// .sp_hiddenblock { マージン：2px; 境界線：1pxソリッドRGB（250、197、82）; ボーダーラジウス：3px; パディング：5px; 背景色：RGBA（250、197、82、0.7）; } .sp_hiddenblock.sp_hide { ディスプレイ：なし！重要。 } この記事は、エドウィン・レイノソとマーク・ブラウンによってレビューされました。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビュアーに感謝します！ Web Voice APIは、Web開発者が音声認識と合成機能をWebページに統合できるようにするJavaScript APIです。
これには多くの理由があります。たとえば、障害のある人（特に視覚障害のあるユーザー、またはハンドモビリティが限られているユーザー）の経験を強化したり、運転などの他のタスクを実行しながらユーザーがWebアプリケーションと対話できるようにすること。Web Voice APIを聞いたことがない場合、またはすぐに開始したい場合は、Aurelio de Rosaの記事を読むことをお勧めします。
ブラウザサポート
ブラウザメーカーは、最近、音声認識APIと音声合成APIの両方を実装し始めたばかりです。ご覧のとおり、これらのAPIのサポートは完璧とはほど遠いので、このチュートリアルを勉強している場合は、適切なブラウザを使用してください。
音声認識ライブラリ
ライブラリは、複雑さを管理し、互換性があることを保証します。たとえば、別のブラウザが音声認識APIのサポートを開始した場合、ベンダーのプレフィックスを追加することを心配する必要はありません。
。
Annyangを初期化するには、スクリプトをWebサイトに追加します。
<🎜>
そして、コマンド名をキーとして使用し、メソッドとしてコールバックを使用するオブジェクトを使用してコマンドを追加します。
if (annyang) { /*逻辑*/ }最後に、それらを追加して、次のコマンドで音声認識を開始します。
var commands = {
'show divs': function() {
$('div').show();
},
'show forms': function() {
$("form").show();
}
};この記事では、音声制御されたオーディオプレーヤーを構築します。音声合成API（ユーザーにどの曲が再生されているか、またはコマンドが認識されていないことを伝えるために使用される）と音声認識API（異なるアプリケーションロジックをトリガーする文字列に変換）の両方を使用します。
annyang.addCommands(commands); annyang.start();
属性をサポートするブラウザのみをサポートしています。 Chromeの最新バージョンは安全な選択である必要があります。
いつものように、Githubで完全なコードとCodepenのデモを見つけることができます。
初心者 - プレイリストinterimResults
新しいオブジェクトを
オーディオプレーヤー
var data = {
"songs": [
{
"fileName": "https://www.ruse-problem.org/songs/RunningWaters.mp3",
"singer" : "Jason Shaw",
"songName" : "Running Waters"
},
...
songs一部の設定データ
UIには、利用可能なコマンドのリスト、利用可能なトラックのリスト、およびユーザーに現在のアクションと以前のコマンドを通知するコンテキストボックスが含まれます。 UIメソッドについては詳しく説明しませんが、簡単な概要を説明します。これらのメソッドのコードはこちらで見つけることができます。
ChangeCurrentsOngeffect
playsong
changestatuscodechangeStatusCode
上記のように、これはコンテキストボックスのステータスメッセージを更新します（たとえば、新しい曲が再生されていることを示します）。
最後のコマンドボックスを更新する小さなヘルパー機能。 speak
プレーヤーメソッド
play
メソッドのみを呼び出します。これは
であり、 pausesongplaySong
audioData.songsこれは、2番目のパラメーターとして渡されるものに応じて、曲を完全に一時停止または停止します（再生時間を曲の開始まで返します）。また、ステータスコードを更新して、曲が停止または一時停止したことをユーザーに通知します。 currentSong
prev
インデックスの減少に対応するファイル名/パスに基づいて曲をロードします。
ユーザーが以前に曲を聞いたことがある場合、この方法はそれを一時停止しようとします。次の曲がデータオブジェクト（つまり、プレイリスト）に存在する場合、ロードして再生します。次の曲がない場合、ステータスコードを変更し、ユーザーに最後の曲に到達したことをユーザーに通知します。 currentSong
currentSongSearchSpecificSong
Voice APIは驚くほど簡単に実装できます。実際、コードの2行だけがユーザーとWebアプリケーションを通信させることができます：
<🎜>
ここで行うことは、私たちが言いたいテキストを使用してutteranceオブジェクトを作成することです。 speechSynthesisインターフェイス（windowオブジェクトを処理し、生成された音声の再生を制御する責任があります。 utterance
話す
メソッドでその実用的なアプリケーションを見ることができます。これは、パラメーターとして渡されたメッセージを声に出して読み取ります。
speak
if (annyang) { /*逻辑*/ }processcommands scope
scopeこの方法はそれほどエキサイティングではありません。それは議論としてコマンドを取り、それに応答するための適切な方法を呼び出します。正規表現を使用して、ユーザーが特定の曲を再生したいかどうかを確認します。そうしないと、異なるコマンドをテストするためにスイッチステートメントに入ります。受信コマンドに対応していない場合、コマンドが理解されていないことをユーザーに通知します。 play
これまでのところ、プレイリストを表すデータオブジェクトと、プレーヤー自体を表す
オブジェクトがあります。次に、ユーザー入力を識別および処理するためにいくつかのコードを記述する必要があります。これはWebKitブラウザにのみ適用されることに注意してください。
audioPlayerこれにより、ユーザーがページにマイクにアクセスできるようになります。アクセスを許可する場合は、話を開始できます。停止すると、
リファレンス：HTML5音声認識API
var commands = {
'show divs': function() {
$('div').show();
},
'show forms': function() {
$("form").show();
}
};
onresultご覧のとおり、オブジェクト上で
は、起源に基づいた認識結果を改善する興味深いオプションです。
次に、
メソッドを開始する前に、annyang.addCommands(commands); annyang.start();
イベントのハンドラーを宣言します。 webkitSpeechRecognition
スピーチ認識者が結果を得ると、少なくとも現在の音声認識の実装と私たちのニーズのコンテキストで、いくつかのことをしたいと考えています。結果が発生するたびに、それを配列に保存し、ブラウザがさらに結果を収集できるように3秒間待機するタイムアウトを設定したいと考えています。 3秒後、収集された結果を使用して、それらを逆順序でループし（新しい結果が正確である可能性が高い）、特定されたトランスクリプトに利用可能なコマンドのいずれかが含まれているかどうかを確認します。その場合、コマンドを実行し、音声認識を再開します。最終結果を待つのに最大1分かかることがあるため、これを行います。これにより、ボタンをクリックするだけで速くなるため、オーディオプレーヤーはかなり反応して意味がなくなります。
<🎜>
ライブラリを使用していないため、音声認識者をセットアップし、各結果をループし、その転写が指定されたキーワードと一致するかどうかを確認するために、より多くのコードを作成する必要があります。
最後に、音声認識の終わりにすぐに再起動します：
if (annyang) { /*逻辑*/ }このセクションの完全なコードをこちらで表示できます。
それだけです。これで、完全に機能的で音声制御されたオーディオプレーヤーができました。 Githubからコードをダウンロードして試してみるか、Codepenデモをチェックすることを強くお勧めします。また、HTTPSを介してサービスを提供するバージョンも提供しています。
この実用的なチュートリアルが、Web Voice APIの可能性の良い紹介を提供することを願っています。実装が安定し、新機能が追加されると、このAPIの使用が成長することがわかります。たとえば、将来のYouTubeは完全に音声制御されていると思います。ここでは、さまざまなユーザーのビデオを視聴したり、特定の曲を演奏したり、音声コマンドを使用して曲を移動したりできます。
Web Voice APIは、他の多くの領域を改善したり、新しい可能性を開いたりすることもできます。たとえば、Voiceを使用して、メールを閲覧したり、Webサイトをナビゲートしたり、ネットワークを検索したりします。
プロジェクトでこのAPIを使用していますか？以下のコメントでお聞きしたいです。
音声制御されたオーディオプレーヤーにはいくつかの利点があります。まず、ハンズフリーエクスペリエンスを提供します。これは、ユーザーが他のタスクで忙しい場合に特に便利です。第二に、モビリティが低下したユーザーのアクセシビリティを強化することができます。これは、従来のコントロールを使用するのが困難な場合があります。最後に、アプリを競争から際立たせることができる斬新で魅力的なユーザーエクスペリエンスを提供します。
Google Chrome、Mozilla Firefox、Microsoft Edgeなど、ほとんどの最新のWebブラウザーはVoice Web APIをサポートしています。ただし、サポートはバージョンとプラットフォームによって異なる場合があるため、APIをアプリケーションに統合する前に、特定のブラウザの互換性を確認することが常に最適です。
高品質のマイクを使用し、バックグラウンドノイズを減らし、APIをトレーニングして、ユーザーの音声とアクセントをよりよく理解して、音声認識の精度を向上させることができます。さらに、アプリケーションにエラー処理を実装して、未確認のコマンドを処理し、ユーザーにフィードバックを提供できます。
はい、音声制御されたオーディオプレーヤーで音声コマンドをカスタマイズできます。これは、アプリケーションコードで独自のコマンドセットを定義することで実行できます。これは、Web Voice APIが認識して解釈することです。これにより、特定のニーズと好みに基づいてユーザーエクスペリエンスをカスタマイズできます。
はい、Web Voice APIは複数の言語をサポートしています。 API設定で言語を指定でき、その言語のコマンドを認識して解釈します。これにより、国際的な聴衆向けのアプリケーションを開発するための普遍的なツールになります。
Web Voice APIは、セキュリティを念頭に置いて設計されています。安全なHTTPS接続を使用して音声データを送信し、個人情報を保存しません。ただし、他のWebテクノロジーと同様に、ソフトウェアを定期的に更新したり、一般的なWebの脆弱性からアプリケーションを保護するなど、セキュリティベストプラクティスに従うことが重要です。
Voice Web APIは主にWebアプリケーションで使用するように設計されていますが、Webビューを通じてモバイルアプリケーションでも使用できます。ただし、ネイティブモバイルアプリケーションの場合、より良いパフォーマンスと統合を提供する可能性のあるプラットフォーム固有の音声認識APIの使用を検討することをお勧めします。
Web Voice APIは強力なツールですが、いくつかの制限があります。たとえば、インターネット接続が機能する必要があり、その精度は、バックグラウンドノイズやユーザーアクセントなどの要因の影響を受ける可能性があります。さらに、APIサポートは、Webブラウザとプラットフォームによって異なる場合があります。
Web Voice APIを開始するには、JavaScriptとWeb開発の基本を理解する必要があります。その後、機能とそれらの使用方法に関する詳細な情報を提供するAPIドキュメントを閲覧できます。また、APIを独自のアプリケーションに統合する方法を学ぶのに役立つ多くのオンラインチュートリアルや例もあります。
以上がWebスピーチAPIで音声制御されたオーディオプレーヤーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
