如何对音频流式传输的 AV 流进行分类 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]
本教程介绍如何为音频-视频 (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 应用商店应用中的音频播放白皮书。