メディア コントロール キーの構成方法 (HTML)(Windows 8)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
このチュートリアルでは、ハードウェア メディア キーをキーボード上に構成し、構成したキーを使って、再生、一時停止、停止などのキーを押したりクリックすることでオーディオ ビデオ (AV) ストリームを制御する方法を示します。
重要
Windows 8.1 で導入された SystemMediaTransportControls クラスは、前の MediaControl クラスに代わるものです。 新しい SystemMediaTransportControls を、MediaControl の代わりに使ってください。
この作業を完了すると、AV ストリームを操作するためのキーボード キーを構成する方法を理解できるようになります。
理解しておく必要があること
テクノロジ
- Windows Runtime
必要条件
- HTML、JavaScript、Windows イベント、イベント処理について理解している必要があります。
- MPEG-Layer 3 (MP3) やその他のデジタル音楽ファイルを再生できるメディア プレーヤーがインストールされている必要があります。
手順
ステップ 1: ボタン入力イベントに登録し、イベントを処理する
この MediaButtons サンプルでは、メディアのトランスポート イベントを構成します。その後、チャンネル アップ ボタンやチャンネル ダウン ボタンなどの、メディア コントロール ボタンからのイベントをリッスンします。ボタン入力に応答してトランスポート コントロール ウィンドウがポップアップし、入力イベントを検出して処理したという視覚的なフィードバックが提供されます。
イベントに登録し、それらのイベントを処理する JavaScript コードを次に示します。
// Assign the button object to MediaControls MediaControls = Windows.Media.MediaControl; // Add event listeners for the buttons MediaControls.addEventListener(“playpressed”, play, false); MediaControls.addEventListener(“pausepressed”, pause, false); MediaControls.addEventListener(“playpausetogglepressed”, playpausetoggle, false); // Add event listeners for the audio element document.GetElementById(“audiotag”).addEventListener(“playing”, playing, false); document.GetElementById(“audiotag”).addEventListener(“paused”, paused, false); document.GetElementById(“audiotag”).addEventListener(“ended”, ended, false); // Define functions that will be the event handlers function play() { document.getElementById(“audiotag”).play(); } function pause() { document.getElementById(“audiotag”).pause(); } function playpausetoggle() { if(MediaControls.isPlaying === true) { document.getElementById(“audiotag”).pause(); } else { document.getElementById(“audiotag”).play(); } } function playing() { MediaControls.isPlaying = true; } function paused() { MediaControls.isPlaying = false; } function ended() { MediaControls.isPlaying = false; }
ステップ 2: 任意のボタンを無効にする
再生リストの先頭には前のトラックはありません。そのため [前のトラック] ボタンは、サンプルで、オーディオの最初のトラックでは使用できなくなっています。同様に、再生リストの最後には次のトラックがないため、[次のトラック] ボタンは使用できません。
次に、MediaControl オブジェクトからイベント リスナーを削除することで [前のトラック] と [次のトラック] ボタンを無効にする方法を示す JavaScript コード スニペットを示します。
// Assign the button object to MediaControls MediaControls = Windows.Media.MediaControl; … // Disable the previous track button MediaControls.removeEventListener(“previoustrackpressed”, previoustrack); // Disable the next track button MediaControls.removeEventListener(“nexttrackpressed”, nexttrack);
ステップ 3: 任意のボタンを有効にする
最初のトラックの後にあり、最後のトラックの前にあるトラックでは、[前のトラック] と [次のトラック] ボタンは有効です。再生リストに 3 つ以上のトラックがある場合、オーディオ アプリで最初または最後のトラック以外のトラックを再生しているときは、[前のトラック] と [次のトラック] ボタンを有効にすることをお勧めします。
次に、MediaControl オブジェクトからのイベント リスナーを追加することで、[前のトラック] と [次のトラック] ボタンを有効にする方法を示す JavaScript コード スニペットを示します。
// Assign the button object to MediaControls MediaControls = Windows.Media.MediaControl; … // Enable the previous track button MediaControls.addEventListener(“previoustrackpressed”, previoustrack, false); // Enable the next track button MediaControls.addEventListener(“nexttrackpressed”, nexttrack, false);
ステップ 4: CallControl のサンプルの実行とテストを行う
- このサンプルのビルド、実行、テストの詳細は、サンプルの説明に含まれています。このサンプルのビルドとその他の手順、および完全なリストについては、メディア キーの構成方法に関するページをご覧ください。
注釈
先ほどビルドとテストを行ったこのコードを使って、さまざまなキー用のイベント リスナーとイベント ハンドラーを作ることで、ハードウェア メディア キーを構成できます。ボタン入力に応答して、トランスポート コントロール ウィンドウが画面にポップアップします。これにより、イベント リスナーとイベント ハンドラーが適切に動作していたことを確認できます。
メディア コントロール ボタンでサポートされるその他のイベントについての開発者向けガイダンスおよび詳しい情報については、「オーディオ認識アプリの開発のガイドライン」およびシステム トランスポート コントロールに関するページをご覧ください。