この記事では、Google ChromeブラウザーでWeb Speech APIを使用して音声検索を実装し、Youtubeチャンネルから動画を自動的に再生した経験を説明したいと思います。 この機能を実証するには、次の手順を実行する必要があります。
- セットをインストールします：Apache2、PHP5（curlパッケージが必要です）。
- Dune HDマルチメディアセンターを使用するか、XBMCをインストールして、インターネットネットワークで動作するように構成します。
- Youtube APIキーを取得して、検索クエリを実行します。
これらのトピックに関する多くの記事があるため、上記のすべてを行う方法については説明しません。 実装の原則は次のとおりです。
- JavaScriptで記述されたスクリプトを使用してフレーズを認識します。GoogleChromeでのみ機能します 。
- 検索クエリに一致する動画を探しています。
- ビデオへの直接リンクを取得します。
- リンクとビデオタイトルのプレイリストを作成します。
- デバイスで再生するプレイリストを送信します。
ネットワークトポロジ：インターネットはWi-FiルーターのWANポートに到達し、それに接続します。
- 制御するデバイス（タブレット、スマートフォン、ラップトップ）。
- Apache Webサーバーを備えたコンピューター（制御が実行される場合、最初のデバイスは存在しない可能性があります）。
- マルチメディアセンター自体（ソフトウェア-XBMC、またはハードウェア-Dune HD）。
JavaScript音声認識スクリプト-index.html：<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title> </title> <script language="javascript" type="text/javascript"> var xmlHttp = false; if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); } </script> <style> * { font-family: Verdana, Arial, sans-serif; font-size: 20px; } a:link { color:#000; text-decoration: none; } a:visited { color:#000; } a:hover { color:#33F; } body { text-align: center; } .button { background: -webkit-linear-gradient(top,#008dfd 0,#0370ea 100%); border: 1px solid #076bd2; border-radius: 3px; color: #fff; display: none; font-size: 13px; font-weight: bold; line-height: 1.3; padding: 8px 25px; text-align: center; text-shadow: 1px 1px 1px #076bd2; letter-spacing: normal; } .final { color: black; padding-right: 3px; } .interim { color: gray; } .info { font-size: 14px; text-align: center; color: #777; display: none; } .sidebyside { display: inline-block; width: 45%; min-height: 40px; text-align: left; vertical-align: top; } #headline { font-size: 40px; font-weight: 300; } #info { font-size: 20px; text-align: center; color: #777; visibility: hidden; } #results { font-size: 14px; font-weight: bold; border: 1px solid #ddd; padding: 15px; text-align: left; min-height: 30px; width: 500px; margin: 0 auto; } #start_button { border: 0; padding: 0; background: url(images/mic.gif); width: 50px; height: 50px; cursor: pointer; vertical-align: top; } #info_speak_now, #info_no_speech, #info_no_microphone, #info_upgrade { display: none; } </style> <meta charset="UTF-8" /> </head> <body> <div id="messages"> <input type="button" id="start_button" onclick="startButton(event);" /> <p id="info_start"> .</p> <p id="info_speak_now">!</p> <p id="info_no_speech"> .</p> <p id="info_no_microphone"> .</p> <p id="info_upgrade"> Web Speech API.</p> </div> <div id="results"> <span id="final_span" class="final"></span> </div> <script> var start_button = document.getElementById('start_button'), recognizing = false, </script> </body> </html>
スクリプトを機能させるには、
画像フォルダーを作成し、そこにマイク付きの写真を入れる必要もあり
ます 。
このスクリプトは2つのことを行います-フレーズを認識し、PHPスクリプトへのリクエストによりAJAXに送信します。 また、すべてのスクリプトのエンコードはUTF-8でなければならないという事実にも注意を払う必要があります（Windowsでエンコードする場合は、VOMなしのUTF-8）。
PHPでビデオクリップを見つけるためのスクリプト-voice_search.php： このスクリプトでは、最後に、マルチメディアセンターの設定に対する
$ urlを編集して余分な部分を削除し、ApacheサーバーのIPアドレスの
server_ipテキストを修正して
Youtube_API_Keyを挿入する
必要があります。 ここで何が起こるか：音声認識スクリプトから、認識されたフレーズのテキストがここに来て、Youtube API v3を使用して、検索クエリに一致するビデオがビデオで検索され、ビデオへのリンクを受け取った後、ビデオファイルへのフルパスが抽出されるサイクルを通過しますプレイリスト
play_list.m3uに記録されます。 このスクリプトは完全なコードのふりをするものではありません。純粋に情報提供を目的として書かれているため、ここではあらゆる種類のチェックが欠落しています。
以上で、IPアドレスのWebサーバーにアクセスできます。 どのデバイスからでも入力できます：タブレット、スマートフォン、ラップトップ、私が気づいた唯一のもの-最近Android搭載のスマートフォンで、それがない場合の音声認識スクリプトは、フレーズを再度送信します。 。
この資料に基づいて、VKでの音楽の音声検索や1-wireデバイスの制御など、さらに多くの興味深いことができます。 一般に、それがうまくいかない場合は試してみてください、それから喜んで質問してください。
PS：この記事は以下に基づいて書かれています：
W3C Web Speech APIYouTube API v3直接リンクを取得するためのスクリプトは、Dune HDのYouTubeアプリケーションから取得され、ニーズに合わせて若干変更されています。 スクリプトを作成せずにマルチメディアセンターを管理したい場合は、
ここまたは
ここで行うことができ
ます。