AV ストリームのオーディオ ストリーミング用の分類方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
このチュートリアルでは、オーディオ ビデオ (AV) ストリームに正しいカテゴリを選択し、オーディオ再生ストリームとして構成する方法を示します。
AV ストリームは、オーディオ付きのビデオとしてストリーミングするか、またはオーディオのみでストリーミングすることができます。AV ストリームは、正しく初期化し、カテゴリを選択することで、適切なモードで再生することができます。
理解しておく必要があること
テクノロジ
- Windows Runtime
必要条件
- HTML、JavaScript、イベントについて理解している必要があります。
手順
ステップ 1: Default.html ファイル用のコードを作成する
この再生マネージャー (PBM) サンプルでは、AV ストリームをオーディオ再生用に構成する方法を示します。この PBM サンプルでは、次の HTML スクリプトを使って、ユーザーが機能を使うための UI 要素を含む画面の書式を設定します。このサンプルでは、試したいストリームの種類 (メディアまたは通信) を選択できます。ボタンをクリックすると、この特定のシナリオのデモを開始できます。
このサンプルで使用する HTML コードを示します。
<!DOCTYPE html> <html> <head> <title>PBM Demo BUILD</title> <!-- WinJS references --> <link href="winjs/css/ui-light.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="WinJS/js/base.js"></script> <script type="text/javascript" src="WinJS/js/ui.js"></script> <script type="text/javascript" src="WinJS/js/wwaapp.js"></script> <!-- SDK Base references --> <link rel="stylesheet" type="text/css" href="css/base-sdk.css" /> <script type="text/javascript" src="base-sdk.js"></script> <!-- Sample references --> <link rel="stylesheet" type="text/css" href="css/program.css" /> <script type="text/javascript" src="program.js"></script> </head> <body role="application"> <div id="rootGrid"> <div id="header" role="contentinfo"></div> <div id="content"> <h1 id="featureLabel">PBM Demo BUILD</h1> <h2 id="inputLabel">Input</h2> <div id="input" role="main" aria-labelledby="inputLabel"> <div class="options"> <h3 id="listLabel">Select scenario:</h3> <select size="7" id="scenarios" aria-labelledby="listLabel"> <option selected="selected" value="1">1) Stream type: Media</option> <option value="2">2) Stream type: Communications</option> </select> </div> <div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive"> <h3 id="descLabel">Description:</h3> <!-- Scenario 1 Input --> <div class="item" id="scenario1Input"> <p>Start a media application with "Media" stream category set, listen for PBM Notifications and pause when another media app starts.</p> <button class="action" id="scenario1Open">Try Scenario 1</button> <br /><br /> </div> <!-- Scenario 2 Input --> <div class="item" id="scenario2Input"> <p>Start a media application with "communications" stream type.</p> <button id="scenario2Open">Try Scenario 2</button><br /><br /> </div> </div> </div> <h2 id="outputLabel"> Output</h2> <div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive"> <!-- Scenario 1 Output --> <div class="item" id="scenario1Output"> </div> <!-- Scenario 2 Output --> <div class="item" id="scenario2Output"> </div> </div> </div> <div id="footer" role="contentinfo"></div> </div> </body> </html>
ステップ 2: Default.js ファイル用のコードを作成する
このメディア ストリームのシナリオでは、PBM サンプルはイベント通知を構成してから、アクティブなメディア アプリから別のメディア アプリへとフォーカスが移動したかどうかをリッスンして判定します。アクティブなメディア アプリがフォーカスを失うと、新しいメディア アプリが開始する間、一時停止するよう自動的に設定されます。
このサンプルで使用する JavaScript コードを示します。
//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF //// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO //// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A //// PARTICULAR PURPOSE. //// //// Copyright (c) Microsoft Corporation. All rights reserved /// <reference path="base-sdk.js" /> (function () { var audtag = null; var mediaControl; var isPlaying; function id(elementId) { return document.getElementById(elementId); } function scenario1DoSomething() { // Create new audio tag for "media" class if(!audtag) { audtag = document.createElement('audio'); audtag.setAttribute("id", "audtag"); audtag.setAttribute("controls", "true"); audtag.setAttribute("msAudioCategory", "backgroundcapablemedia"); audtag.setAttribute("src", "folk_rock.mp3"); document.getElementById("scenario1Output").appendChild(audtag); audtag.load(); } } function scenario2DoSomething() { // Create new audio tag for "communication" class if(!audtag) { audtag = document.createElement('audio'); audtag.setAttribute("id", "audtag"); audtag.setAttribute("controls", "true"); audtag.setAttribute("msAudioDeviceType", "communications"); audtag.setAttribute("msAudioCategory", "communications"); audtag.setAttribute("src", "folk_rock.mp3"); document.getElementById("scenario2Output").appendChild(audtag); audtag.load(); } } function initialize() { // Add any initialization code here id("scenario1Open").addEventListener("click", scenario1DoSomething, false); id("scenario2Open").addEventListener("click", scenario2DoSomething, false); id("scenarios").addEventListener("change", onScenarioChanged, false); // Create the media control. var mediaControl = Windows.Media.MediaControl; // Add event listeners for PBM notifications to illustrate that app is // losing/gaining focus, and then pass the audio tag along to the function mediaControl.addEventListener("soundlevelchanged", soundLevelChanged, false); } function onScenarioChanged() { // Do any necessary clean up on the output, the scenario id // can be obtained from sdkSample.scenarioId. sdkSample.displayStatus(""); if (audtag) { parentNode = document.getElementById("audtag").parentNode; parentNode.removeChild(document.getElementById("audtag")); } audtag = null; } function getTimeStampedMessage(eventCalled) { var timeformat = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter("longtime"); var time = timeformat.format(new Date()); message = eventCalled + "\t\t" + time; return message; } function soundLevelChanged() { var soundLevel = Windows.Media.MediaControl.soundLevel; statusMessagesFunc(soundLevel); if (soundLevel !== Windows.Media.SoundLevel.muted) { appUnmuted(); } else { appMuted(); } } function appMuted() { var Focus = 1; if (audtag) { if (!audtag.paused) { isPlaying = true; audtag.pause(); } else { isPlaying = false; } statusMessagesFunc(Focus); } } function appUnmuted() { var Focus = 2; if (audtag) { if (isPlaying) { audtag.play(); } statusMessagesFunc(Focus); } } document.addEventListener("DOMContentLoaded", initialize, false); })();
ステップ 3: 再生マネージャーのサンプルの実行とテストを行う
- このサンプルのビルド、実行、テストの詳細は、サンプルの説明に含まれています。このサンプルのビルドとその他の手順については、再生マネージャーのサンプルに関するページをご覧ください。
注釈
先ほどビルドとテストを行ったこのコードを使って、AV ストリームを初期化し、正しいカテゴリを選んで、オーディオ再生用にストリーミングできます。続いて、このコードは選んだ MPEG-Layer 3 (MP3) オーディオ ファイルをバックグラウンドでストリーミングします。
フォーカスを失ったり受け取ったりするたびに、コードはストリームの再生/一時停止の状態を判定するためにチェックを行い、それに応じてストリームのミュートをオンまたはオフにします。
AV ストリームの分類についての開発者向けガイダンスと詳しい情報については、「クイック スタート: アプリへのオーディオの追加」と Windows ストア アプリでのオーディオの再生に関するホワイト ペーパーをご覧ください。