Cómo categorizar una secuencia de AV para transmisión por secuencias de audio (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

En este tutorial se muestra cómo seleccionar la categoría correcta de una secuencia de audio y vídeo (AV), para configurarla como una secuencia de reproducción de audio.

Una secuencia de AV puede transmitirse como vídeo con audio o solo como audio. Para asegurarte de que una secuencia de AV se reproduzca en el modo adecuado, debes inicializarla correctamente y después seleccionar una categoría para ella.

Lo que debes saber

Tecnologías

  • Windows Runtime

Requisitos previos

  • Deberás estar familiarizado con HTML, JavaScript y los eventos.

Instrucciones

Paso 1: Código para el archivo Default.html

En el ejemplo de Administrador de reproducción (PBM) se muestra cómo configurar una secuencia de AV para reproducir audio. En el ejemplo de PBM, se usa el siguiente script HTML para dar formato a la pantalla con los elementos de interfaz de usuario que permiten experimentar la funcionalidad. El ejemplo permite seleccionar el tipo de secuencia (multimedia o comunicaciones) con el que deseas experimentar. Después puedes hacer clic en un botón para iniciar una demo de este escenario en particular.

  • Este es el código HTML que se usa en el ejemplo:

    <!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>

Paso 2: Código para el archivo Default.js

En el escenario de secuencias multimedia, el ejemplo de PBM configura notificaciones de eventos y después escucha para determinar si la aplicación multimedia activa perdió el foco por otra aplicación multimedia. Cuando la aplicación multimedia activa pierde el foco, se pone a sí misma en pausa mientras se inicia la nueva aplicación multimedia.

  • Este es el código JavaScript que se usa en el ejemplo:

    //// 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);

})();

Paso 3: Ejecución y prueba del ejemplo de Administrador de reproducción

  • En la descripción de esta muestra, podrás encontrar instrucciones detalladas para compilar, ejecutar y probar la muestra. Para ver las instrucciones de compilación y otras instrucciones para esta muestra, consulta la muestra de administrador de reproducción.

Observaciones

El código que acabas de compilar y probar te permitió inicializar una secuencia de AV y después seleccionar la categoría correcta para la transmisión en secuencias de la reproducción de audio. Después, el código transmitió en secuencias el archivo de audio MPEG-Layer 3 (MP3) seleccionado en segundo plano.

Cuando se pierde o recibe el foco, el código trata de determinar el estado Repr/Pausa de la secuencia y después silencia o reactiva el audio de la misma según corresponda.

Para obtener directrices de desarrollo y más información acerca de las categorías de secuencias de AV, consulta el tema Inicio rápido: agregar audio en una aplicación de la Tienda Windows y las notas del producto sobre Reproducción de audio en una aplicación de la Tienda Windows.

Temas relacionados

Reproducción de audio en una aplicación de la Tienda Windows

Directrices para el desarrollo de aplicaciones compatibles con audio

Muestra de administrador de reproducción

Inicio rápido: Agregar audio en una aplicación de la Tienda Windows