So wird’s gemacht: Kategorisieren eines AV-Datenstroms für das Audiostreaming (HTML)

  • Artikel

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

In diesem Lernprogramm erfahren Sie, wie Sie die richtige Kategorie für einen AV-Datenstrom (Audio-Video) auswählen, um ihn als Datenstrom für die Audiowiedergabe zu konfigurieren.

Ein AV-Datenstrom kann als Video mit Audio oder nur als Audio gestreamt werden. Sie können sicherstellen, dass ein AV-Datenstrom im entsprechenden Modus wiedergegeben wird, in dem Sie ihn ordnungsgemäß initialisieren und dann eine Kategorie für ihn auswählen.

Wissenswertes

Technologien

  • Windows Runtime

Voraussetzungen

  • Sie sollten mit HTML, JavaScript und Ereignissen vertraut sein.

Anweisungen

Schritt 1: Code für Ihre Default.html-Datei

Im Beispiel zum Wiedergabe-Manager sehen Sie, wie ein AV-Datenstrom für die Audiowiedergabe konfiguriert wird. Im Beispiel für den Wiedergabe-Manager wird das folgende Skript verwendet, um den Bildschirm mit UI-Elementen zu formatieren, mit denen Sie seine Funktionen nutzen können. Mit dem Beispiel können Sie den Datenstromtyp (Medien oder Kommunikation) auswählen, mit dem Sie experimentieren möchten. Dann können Sie auf eine Schaltfläche klicken, um die Demo für dieses bestimmte Szenario zu starten.

  • Hier ist der im Beispiel verwendete HTML-Code:

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

Schritt 2: Code für Ihre Default.js-Datei

Im Mediendatenstromszenario werden vom Beispiel für den Wiedergabe-Manager Ereignisbenachrichtigungen konfiguriert, und dann wird gelauscht, um zu bestimmen, ob die aktive Medien-App ihren Fokus an eine andere Medien-App verloren hat oder nicht. Wenn die aktive Medien-App den Fokus verliert, hält sie sich selbst an, während die neue Medien-App startet.

  • Hier ist der im Beispiel verwendet JavaScript-Code:

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

})();

Schritt 3: Ausführen und Testen des Beispiels für den Wiedergabe-Manager

  • Ausführliche Anleitungen zum Erstellen, Ausführen und Testen dieses Beispiels sind in der zugehörigen Beschreibung enthalten. Erstellungs- und andere Anleitungen zu diesem Beispiel finden Sie im Beispiel zum Wiedergabe-Manager.

Anmerkungen

Mit dem gerade von Ihnen erstellten und getesteten Code können Sie einen AV-Datenstrom initialisieren und dann die geeignete Kategorie auswählen, um die Audiowiedergabe zu streamen. Ihre ausgewählte MP3-Audiodatei (MPEG-Layer 3) wird dann im Hintergrund vom Code gestreamt.

Sobald der Fokus verloren geht oder erhalten wird, überprüft der Code den Wiedergabe-/Pausestatus des Datenstroms und schaltet den Datenstrom dann entsprechend stumm oder hebt die Stummschaltung auf.

Einen Leitfaden für Entwickler und weitere Informationen über AV-Datenstromkategorien finden Sie im Thema Schnellstart: Hinzufügen von Audio in einer Windows Store-App und im Whitepaper Audiowiedergabe in einer Windows Store-App.

Verwandte Themen

Audiowiedergabe in einer Windows Store-App

Richtlinien für das Entwickeln audiofähiger Apps

Beispiel zum Wiedergabe-Manager

Schnellstart: Hinzufügen von Audio in einer Windows Store-App