如何進行音訊串流處理的 AV 串流分類 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
這個教學課程會示範如何選取正確的音訊視訊 (AV) 串流類別，以便將它設定成音訊播放串流。
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 市集應用程式中新增音訊主題和 Windows 市集應用程式中的音訊播放白皮書。