ホームページ >ウェブフロントエンド >jsチュートリアル >WebスピーチAPIで音声制御されたオーディオプレーヤーを作成する

WebスピーチAPIで音声制御されたオーディオプレーヤーを作成する

William Shakespeareオリジナル: 2025-02-18 09:40:09925ブラウズ

Make a Voice-Controlled Audio Player with the Web Speech API

コアポイント

Web Voice APIは、Web開発者が音声認識と合成をWebページに統合できるようにするJavaScript APIです。これにより、特に障害のある人や複数のタスクを同時に処理する必要があるユーザーにとって、ユーザーエクスペリエンスが向上します。
音声認識APIでは、マイクにアクセスするためにインターネット接続とユーザーの許可が必要です。 Annyangなどのライブラリは、複雑さを管理し、前方の互換性を確保するのに役立ちます。
音声合成APIと音声認識APIを使用して、音声制御されたオーディオプレーヤーを構築できます。これにより、ユーザーは曲の間でナビゲートし、音声コマンドを使用して特定の曲を要求できます。
オーディオプレーヤーには、設定データ、UIメソッド、音声APIメソッド、およびオーディオ操作メソッドが含まれます。ユーザー入力を識別および処理するコードは、WebKitブラウザーにのみ適用できます。
Web Voice APIには、音声コマンドを使用してメールの閲覧、Webサイトのナビゲート、Webの検索など、多くの領域で使用される可能性があります。実装が安定し、新機能が追加されると、このAPIの使用が成長すると予想されます。

余分なブロックを非表示/表示するために使用される

// .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には現在、インターネット接続が必要です。接続がHTTPを使用する場合、ユーザーはリクエストが作成されるたびにサイトがマイクを使用できるようにする必要があります。接続がHTTPSを使用している場合、これを1回だけ行う必要があります。

音声認識ライブラリ

ライブラリは、複雑さを管理し、互換性があることを保証します。たとえば、別のブラウザが音声認識APIのサポートを開始した場合、ベンダーのプレフィックスを追加することを心配する必要はありません。

Annyangはこのようなライブラリであり、非常に使いやすいです。

もっと学ぶ

。

Annyangを初期化するには、スクリプトをWebサイトに追加します。

<code class="language-javascript"></code>

APIがこのようにサポートされているかどうかを確認できます。

そして、コマンド名をキーとして使用し、メソッドとしてコールバックを使用するオブジェクトを使用してコマンドを追加します。

<code class="language-javascript">if (annyang) { /*逻辑*/ }</code>

最後に、それらを追加して、次のコマンドで音声認識を開始します。

<code class="language-javascript">var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};</code>

音声制御されたオーディオプレーヤー

この記事では、音声制御されたオーディオプレーヤーを構築します。音声合成API（ユーザーにどの曲が再生されているか、またはコマンドが認識されていないことを伝えるために使用される）と音声認識API（異なるアプリケーションロジックをトリガーする文字列に変換）の両方を使用します。

<code class="language-javascript">annyang.addCommands(commands);
annyang.start();</code>

Web Voice APIでオーディオプレーヤーを使用する利点は、ユーザーがブラウザ内の他のページを閲覧したり、ブラウザを最小化したり、曲を切り替えることができる間、他のアクションを実行できることです。プレイリストに多くの曲がある場合は、手動で検索せずに特定の曲をリクエストすることもできます（もちろん、その名前や歌手がわかっている場合）。

プロジェクトに追加の依存関係を追加せずにAPIを使用する方法を示したいため、音声認識のためにサードパーティのライブラリに依存することはありません。音声制御されたオーディオプレーヤーは、

属性をサポートするブラウザのみをサポートしています。 Chromeの最新バージョンは安全な選択である必要があります。

いつものように、Githubで完全なコードとCodepenのデモを見つけることができます。

初心者 - プレイリストinterimResults

静的プレイリストから始めましょう。アレイに異なる曲を含むオブジェクトで構成されています。各曲は、ファイルへのパス、歌手の名前、曲の名前を含む新しいオブジェクトです。

新しいオブジェクトを

配列に追加し、オーディオプレーヤーに新しい曲を自動的に含めることができるはずです。

オーディオプレーヤー

<code class="language-javascript">var data = {
  "songs": [
    {
      "fileName": "https://www.ruse-problem.org/songs/RunningWaters.mp3",
      "singer" : "Jason Shaw",
      "songName" : "Running Waters"
    },
    ...</code>

それでは、プレーヤー自体を見てみましょう。これは、以下を含むオブジェクトになります

songs一部の設定データ

UIに関連するメソッド（Song Songリストの記入など）

音声APIに関連するメソッド（認識や処理コマンドなど）

オーディオ操作に関連するメソッド（たとえば、再生、一時停止、停止、前、次へ）

属性は、ユーザーが現在入っている曲のインデックスを指します。これは、たとえば、前/次の曲を再生したり、停止/一時停止したりする必要がある場合に便利です。

配列には、ユーザーが聴いたすべての曲が含まれています。これは、ユーザーが同じ曲に次に耳を傾けるときに、ダウンロードせずに配列からロードできることを意味します。

ここで完全なコードを表示できます。

uiメソッド

UIには、利用可能なコマンドのリスト、利用可能なトラックのリスト、およびユーザーに現在のアクションと以前のコマンドを通知するコンテキストボックスが含まれます。 UIメソッドについては詳しく説明しませんが、簡単な概要を説明します。これらのメソッドのコードはこちらで見つけることができます。

load

これは、以前に宣言したプレイリストを繰り返し、アーティストの名前とともに、利用可能なトラックのリストに曲の名前を追加します。

ChangeCurrentsOngeffect

これは、現在どの曲が再生されているかを示しています（グリーンでマークし、その横にあるヘッドフォンを追加することで）、どの曲が再生されているかを示します。

playsong

これは、ユーザーの曲がメソッド（この情報をボックスに追加する）を介して再生または終了していることを示し、Voice APIを介してこの変更をユーザーに通知していることを示しています。

changestatuscodechangeStatusCode 上記のように、これはコンテキストボックスのステータスメッセージを更新します（たとえば、新しい曲が再生されていることを示します）。

changelastcommand

最後のコマンドボックスを更新する小さなヘルパー機能。 speak

トグルスピナー

スピナーアイコンを非表示または表示するための小さなヘルパー関数（ユーザーの音声コマンドが現在処理されていることを示します）。

プレーヤーメソッド

プレイヤーは、あなたが期待するかもしれないもの、すなわち、再生を開始、停止、一時停止し、トラック間を行き来することについて責任を負います。繰り返しますが、私はこれらの方法を詳細に説明するつもりはありませんが、むしろあなたをGitHubコードベースに導きたいと思います。

play

これは、ユーザーが曲を聞いたかどうかをチェックします。そうでない場合は、曲を開始します。そうでなければ、現在キャッシュされた曲で以前に説明した

メソッドのみを呼び出します。これは

であり、

インデックスに対応しています。

pausesongplaySong audioData.songsこれは、2番目のパラメーターとして渡されるものに応じて、曲を完全に一時停止または停止します（再生時間を曲の開始まで返します）。また、ステータスコードを更新して、曲が停止または一時停止したことをユーザーに通知します。 currentSong

停止

これは、最初の唯一のパラメーターに基づいて曲を一時停止または停止します：

これは、前の曲がキャッシュされているかどうかをチェックします。もしそうなら、現在の曲を一時停止し、

を減らし、現在の曲を再び演奏します。新しい曲が配列にない場合、それは同じことを行いますが、最初に

インデックスの減少に対応するファイル名/パスに基づいて曲をロードします。

ユーザーが以前に曲を聞いたことがある場合、この方法はそれを一時停止しようとします。次の曲がデータオブジェクト（つまり、プレイリスト）に存在する場合、ロードして再生します。次の曲がない場合、ステータスコードを変更し、ユーザーに最後の曲に到達したことをユーザーに通知します。 currentSong currentSongSearchSpecificSong

これはキーワードをパラメーターとして受け取り、曲名とアーティストの間で線形検索を実行し、最初の試合を再生します。

Voice APIメソッド

Voice APIは驚くほど簡単に実装できます。実際、コードの2行だけがユーザーとWebアプリケーションを通信させることができます：

<code class="language-javascript"></code>

ここで行うことは、私たちが言いたいテキストを使用してutteranceオブジェクトを作成することです。 speechSynthesisインターフェイス（オブジェクトで利用可能）は、このwindowオブジェクトを処理し、生成された音声の再生を制御する責任があります。 utterance

ブラウザで試してみてください。そんなに簡単です！

話す

メソッドでその実用的なアプリケーションを見ることができます。これは、パラメーターとして渡されたメッセージを声に出して読み取ります。 speak

2番目のパラメーター（）が存在する場合、メッセージが再生された後、メソッドを呼び出します。

<code class="language-javascript">if (annyang) { /*逻辑*/ }</code>

processcommands scope scopeこの方法はそれほどエキサイティングではありません。それは議論としてコマンドを取り、それに応答するための適切な方法を呼び出します。正規表現を使用して、ユーザーが特定の曲を再生したいかどうかを確認します。そうしないと、異なるコマンドをテストするためにスイッチステートメントに入ります。受信コマンドに対応していない場合、コマンドが理解されていないことをユーザーに通知します。 play

こちらでコードを見つけることができます。

すべてを一緒にテレ

これまでのところ、プレイリストを表すデータオブジェクトと、プレーヤー自体を表す

オブジェクトがあります。次に、ユーザー入力を識別および処理するためにいくつかのコードを記述する必要があります。これはWebKitブラウザにのみ適用されることに注意してください。

ユーザーが以前と同じようにシンプルなアプリに話しかけるコード：

audioPlayerこれにより、ユーザーがページにマイクにアクセスできるようになります。アクセスを許可する場合は、話を開始できます。停止すると、イベントがトリガーされ、Voice Captureの結果がJavaScriptオブジェクトとして利用可能になります。

リファレンス：HTML5音声認識API

<code class="language-javascript">var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};</code>

次のようにアプリケーションに実装できます。

onresultご覧のとおり、オブジェクト上で

の存在をテストしました。それが存在する場合は、起動できます。そうしないと、ブラウザがサポートしていないことをユーザーに伝えます。すべてがうまくいけば、いくつかのオプションを設定します。その中には、

は、起源に基づいた認識結果を改善する興味深いオプションです。

次に、

メソッドを開始する前に、

<code class="language-javascript">annyang.addCommands(commands);
annyang.start();</code>

および

イベントのハンドラーを宣言します。 webkitSpeechRecognition

結果の処理

スピーチ認識者が結果を得ると、少なくとも現在の音声認識の実装と私たちのニーズのコンテキストで、いくつかのことをしたいと考えています。結果が発生するたびに、それを配列に保存し、ブラウザがさらに結果を収集できるように3秒間待機するタイムアウトを設定したいと考えています。 3秒後、収集された結果を使用して、それらを逆順序でループし（新しい結果が正確である可能性が高い）、特定されたトランスクリプトに利用可能なコマンドのいずれかが含まれているかどうかを確認します。その場合、コマンドを実行し、音声認識を再開します。最終結果を待つのに最大1分かかることがあるため、これを行います。これにより、ボタンをクリックするだけで速くなるため、オーディオプレーヤーはかなり反応して意味がなくなります。

<code class="language-javascript"></code>

ライブラリを使用していないため、音声認識者をセットアップし、各結果をループし、その転写が指定されたキーワードと一致するかどうかを確認するために、より多くのコードを作成する必要があります。

最後に、音声認識の終わりにすぐに再起動します：

<code class="language-javascript">if (annyang) { /*逻辑*/ }</code>

このセクションの完全なコードをこちらで表示できます。

それだけです。これで、完全に機能的で音声制御されたオーディオプレーヤーができました。 Githubからコードをダウンロードして試してみるか、Codepenデモをチェックすることを強くお勧めします。また、HTTPSを介してサービスを提供するバージョンも提供しています。

結論

この実用的なチュートリアルが、Web Voice APIの可能性の良い紹介を提供することを願っています。実装が安定し、新機能が追加されると、このAPIの使用が成長することがわかります。たとえば、将来のYouTubeは完全に音声制御されていると思います。ここでは、さまざまなユーザーのビデオを視聴したり、特定の曲を演奏したり、音声コマンドを使用して曲を移動したりできます。

Web Voice APIは、他の多くの領域を改善したり、新しい可能性を開いたりすることもできます。たとえば、Voiceを使用して、メールを閲覧したり、Webサイトをナビゲートしたり、ネットワークを検索したりします。

プロジェクトでこのAPIを使用していますか？以下のコメントでお聞きしたいです。

Web Voice API（FAQ）を使用した音声制御オーディオプレーヤーについてよく尋ねる質問

音声制御されたオーディオプレーヤーでWeb Voice APIはどのように機能しますか？

Web Voice APIは、開発者が音声認識と合成をWebアプリケーションに統合できる強力なツールです。音声制御されたオーディオプレーヤーでは、APIは、アプリケーションが解釈および実行できるテキストに変換することにより機能します。たとえば、ユーザーが「再生」と書かれている場合、APIはそれをテキストに変換し、アプリケーションはこれがオーディオの再生を開始するコマンドであることを理解します。このプロセスには、洗練されたアルゴリズムと機械学習手法が含まれ、人間の発話を正確に特定して解釈します。

音声制御されたオーディオプレーヤーを使用することの利点は何ですか？

音声制御されたオーディオプレーヤーにはいくつかの利点があります。まず、ハンズフリーエクスペリエンスを提供します。これは、ユーザーが他のタスクで忙しい場合に特に便利です。第二に、モビリティが低下したユーザーのアクセシビリティを強化することができます。これは、従来のコントロールを使用するのが困難な場合があります。最後に、アプリを競争から際立たせることができる斬新で魅力的なユーザーエクスペリエンスを提供します。

任意のWebブラウザでVoice APIを使用できますか？

Google Chrome、Mozilla Firefox、Microsoft Edgeなど、ほとんどの最新のWebブラウザーはVoice Web APIをサポートしています。ただし、サポートはバージョンとプラットフォームによって異なる場合があるため、APIをアプリケーションに統合する前に、特定のブラウザの互換性を確認することが常に最適です。

音声制御されたオーディオプレーヤーの音声認識の精度を改善する方法は？

高品質のマイクを使用し、バックグラウンドノイズを減らし、APIをトレーニングして、ユーザーの音声とアクセントをよりよく理解して、音声認識の精度を向上させることができます。さらに、アプリケーションにエラー処理を実装して、未確認のコマンドを処理し、ユーザーにフィードバックを提供できます。

音声制御されたオーディオプレーヤーで音声コマンドをカスタマイズできますか？

はい、音声制御されたオーディオプレーヤーで音声コマンドをカスタマイズできます。これは、アプリケーションコードで独自のコマンドセットを定義することで実行できます。これは、Web Voice APIが認識して解釈することです。これにより、特定のニーズと好みに基づいてユーザーエクスペリエンスをカスタマイズできます。

Web Voice APIは英語以外の言語をサポートしていますか？

はい、Web Voice APIは複数の言語をサポートしています。 API設定で言語を指定でき、その言語のコマンドを認識して解釈します。これにより、国際的な聴衆向けのアプリケーションを開発するための普遍的なツールになります。

Web Voice APIのセキュリティはどうですか？

Web Voice APIは、セキュリティを念頭に置いて設計されています。安全なHTTPS接続を使用して音声データを送信し、個人情報を保存しません。ただし、他のWebテクノロジーと同様に、ソフトウェアを定期的に更新したり、一般的なWebの脆弱性からアプリケーションを保護するなど、セキュリティベストプラクティスに従うことが重要です。

モバイルアプリケーションでWeb Voice APIを使用できますか？

Voice Web APIは主にWebアプリケーションで使用するように設計されていますが、Webビューを通じてモバイルアプリケーションでも使用できます。ただし、ネイティブモバイルアプリケーションの場合、より良いパフォーマンスと統合を提供する可能性のあるプラットフォーム固有の音声認識APIの使用を検討することをお勧めします。

Web Voice APIの制限は何ですか？

Web Voice APIは強力なツールですが、いくつかの制限があります。たとえば、インターネット接続が機能する必要があり、その精度は、バックグラウンドノイズやユーザーアクセントなどの要因の影響を受ける可能性があります。さらに、APIサポートは、Webブラウザとプラットフォームによって異なる場合があります。

音声Web APIを始める方法は？

Web Voice APIを開始するには、JavaScriptとWeb開発の基本を理解する必要があります。その後、機能とそれらの使用方法に関する詳細な情報を提供するAPIドキュメントを閲覧できます。また、APIを独自のアプリケーションに統合する方法を学ぶのに役立つ多くのオンラインチュートリアルや例もあります。

以上がWebスピーチAPIで音声制御されたオーディオプレーヤーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 firefox 正则表达式 chrome webkit edge switch 字符串循环接口对象事件 display margin padding border background github 算法 http https microsoft ui

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptカレンダーとスケジューラーの比較次の記事：JavaScriptカレンダーとスケジューラーの比較

続きを見る