Поделиться через

Как классифицировать аудиовидеопоток для потоковой передачи звука (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-сценарий. Образец позволяет выбрать тип потока (мультимедиа или связь), с которым вам хотелось бы поэкспериментировать. Затем вы можете нажатием кнопки запустить демонстрационную версию для отдельного сценария.

  • В этом образце используется следующий 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.

Связанные разделы

Воспроизведение звука в приложении Магазина Windows

Правила разработки приложений, поддерживающих аудио

Пример диспетчера воспроизведения

Краткое руководство: добавление звука в приложение Магазина Windows