오디오 스트리밍을 위해 AV 스트림을 분류하는 방법(HTML)

Applies to Windows and Windows Phone

이 자습서에서는 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 스토어 앱에서 오디오 재생 백서를 참조하세요.

관련 항목

Windows 스토어 앱에서 오디오 재생
오디오 인식 앱 개발에 대한 지침
재생 관리자 샘플
빠른 시작: Windows 스토어 앱에 오디오 추가

 

 

표시:
© 2015 Microsoft