Comment catégoriser un flux AV pour flux audio (HTML)

  • Article

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Ce didacticiel vous montre comment sélectionner la catégorie appropriée pour un flux audio-vidéo (AV) afin de le configurer en tant que flux de lecture audio.

Un flux AV peut se lire en vidéo avec audio, ou en audio uniquement. Vous pouvez faire en sorte qu’un flux AV se lise dans le mode approprié, en l’initialisant correctement et en lui sélectionnant une catégorie.

Ce que vous devez savoir

Technologies

  • Windows Runtime

Prérequis

  • Vous devez connaître HTML, JavaScript et les événements.

Instructions

Étape 1: Code pour le fichier Default.html

L’exemple de gestionnaire de lecture vous montre comment configurer un flux AV en vue d’une lecture audio. L’exemple de PBM utilise le script HTML suivant pour formater l’écran avec les éléments IU qui vous permettent de faire l’expérience de sa fonctionnalité. L’exemple vous permet de sélectionner le type de flux (média ou communication) avec lequel vous voulez travailler. Vous pouvez ensuite cliquer sur un bouton afin de démarrer la démonstration pour ce scénario en particulier.

  • Voici le code HTML que l’exemple utilise :

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

Étape 2: Code pour le fichier Default.js

Dans le scénario du flux multimédia, l’exemple de PBM configure des notifications d’événement, puis écoute afin de déterminer si l’application multimédia active a perdu ou non le focus au profit d’une autre application multimédia. Lorsque l’application multimédia active perd le focus, elle se met elle-même en pause pendant que la nouvelle application multimédia démarre.

  • Voici le code JavaScript que l’exemple utilise :

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

})();

Étape 3: Exécuter et tester l’exemple de Gestionnaire de lecture

  • Des instructions détaillées sur le développement, l’exécution et le test de cet exemple sont fournies dans la description spécifique de l’exemple. Pour afficher la build et d’autres instructions pour cet exemple, consultez l’exemple de gestionnaire de lecture.

Remarques

Le code que vous venez de compiler et de tester vous a permis d’initialiser un flux AV, puis de sélectionner la catégorie appropriée pour qu’il se diffuse en lecture audio. Le code a ensuite diffusé votre fichier audio MP3 (MPEG-Layer 3 ) sélectionné en arrière-plan.

Dès que le flux perd ou reçoit le focus, le code cherche à déterminer l’état Lecture/Pause du flux, puis active ou désactive le son du flux en conséquence.

Pour obtenir des conseils de développement et d’autres informations sur les catégories de flux AV, voir la rubrique Démarrage rapide : ajout de son dans une application du Windows Store et le livre blanc Lecture audio dans une application du Windows Store.

Rubriques associées

Lecture audio dans une application du Windows Store

Recommandations concernant le développement d’applications prenant en charge l’audio

Exemple de gestionnaire de lecture

Démarrage rapide : ajout de son dans une application du Windows Store