Como categorizar um fluxo de AV para streaming de áudio (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Este tutorial mostra como selecionar a categoria correta de um fluxo de AV (áudio e vídeo) para configurá-lo como um fluxo de reprodução de áudio.

Um fluxo de AV pode ser transmitido como vídeo com áudio ou como somente áudio. Garanta que um fluxo de AV (áudio e vídeo) seja reproduzido no modo apropriado iniciando-o corretamente e selecionando uma categoria para ele.

O que você precisa saber

Tecnologias

  • Windows Runtime

Pré-requisitos

  • Você deve estar familiarizado com HTML, JavaScript e eventos.

Instruções

Etapa 1: Código do arquivo Default.html

O exemplo de PBM (Gerenciador de Reprodução de Mídia) mostra como você pode configurar um fluxo de AV para reprodução de áudio. O exemplo de PBM usa o script HTML a seguir para formatar a tela com os elementos de interface do usuário que permitem a você experimentar sua funcionalidade. O exemplo mostra como você seleciona o tipo de fluxo (mídia ou comunicações) que você gostaria de experimentar. Em seguida, você pode clicar em um botão para iniciar a demonstração desse cenário específico.

  • Este é o código HTML que o exemplo usa:

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

Etapa 2: Código do arquivo Default.js

No cenário do fluxo de mídia, o exemplo de PBM configura as notificações de evento e ouve para determinar se o aplicativo de mídia ativo perdeu o foco para outro aplicativo de mídia. Quando o aplicativo de mídia ativo perde o foco, ele pausa si mesmo enquanto o novo aplicativo de mídia é iniciado.

  • Este é o código JavaScript que o exemplo usa:

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

})();

Etapa 3: Executar e testar o exemplo de Gerenciador de Reprodução de Mídia

  • Instruções detalhadas de compilação, execução e teste desse exemplo estão incluídas na descrição do exemplo. Para ver a compilação e outras instruções sobre este exemplo, consulte Exemplo de Gerenciador de Reprodução de Mídia.

Comentários

O código que você compilou e testou permitiu que você inicializasse um fluxo de áudio e vídeo e selecionasse a categoria correta para ele transmitir a reprodução de áudio. O código então transmitiu o arquivo de áudio MP3 selecionado em tela de fundo.

Sempre que o foco é perdido ou recebido, o código verifica para determinar o estado Reproduzir/Pausar do fluxo e ativa ou desativa o mudo do áudio de maneira correspondente.

Para obter as diretrizes ao desenvolvedor e saber mais sobre as categorias de fluxo de AV, veja Guia de início rápido: adicionando áudio a um aplicativo da Windows Store e o white paper Reprodução de áudio em um aplicativo da Windows Store.

Tópicos relacionados

Reprodução de áudio em um aplicativo da Windows Store

Diretrizes para desenvolver aplicativos com reconhecimento de áudio

Exemplo de Gerenciador de Reprodução de Mídia

Guia de início rápido: adicionando áudio a um aplicativo da Windows Store