오디오 스트리밍을 위해 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 스트림을 초기화한 다음 스트림의 오디오 재생용으로 스트리밍하기 위한 올바른 범주를 선택할 수 있었습니다. 그런 다음 코드에서는 선택한 MP3(MPEG-Layer 3) 오디오 파일을 백그라운드에서 스트리밍했습니다.
포커스를 잃거나 받을 때마다 이 코드에서는 스트림의 재생/일시 중지 상태를 확인한 다음 적절하게 스트림을 음소거 또는 음소거 해제합니다.
AV 스트림 범주에 대한 개발자 지침 및 자세한 내용은 빠른 시작: Windows 스토어 앱에서 오디오 추가 항목 및 Windows 스토어 앱에서 오디오 재생 백서를 참조하세요.