So wird’s gemacht: Wiedergeben von Audio im Hintergrund (HTML)

Artikel
02/16/2016

[ 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 für die Wiedergabe im Hintergrund zu konfigurieren.

Hinweis Wenn ein Videodatenstrom richtig für die Wiedergabe im Hintergrund kategorisiert ist und das Video in den Hintergrundmodus gewechselt wird, wird die Audiospur weiter wiedergegeben, das Video ist jedoch nicht mehr zu sehen. Dies ist ein gewünschtes und normales Verhalten, da dadurch die Leistungsanforderungen an das Gerät reduziert werden, während das Video im Hintergrund wiedergegeben wird.

Dieses Feature sehen Sie im vollständigen Beispiel für die Medienwiedergabe unter Medienwiedergabe von A bis Z in Aktion.

Voraussetzungen

Sie müssen mit HTML, JavaScript, Windows-Ereignissen und Ereignishandling vertraut sein.
Eine Instanz von Microsoft Visual Studio muss installiert sein.
Sie benötigen eine App, die Unterstützung für Audio- und Videodatenströme bietet. Weitere Informationen zur einfachsten Methode einer solchen Implementierung finden Sie unter Schnellstart: Audio in einer Windows Store-App und Schnellstart: Video und Audio.

Anweisungen

Schritt 1: Erstellen einer Deklaration für Hintergrundaudio im App-Manifest

Öffnen Sie die Projektdatei für Ihre App in Microsoft Visual Studio.
Doppelklicken Sie im Projektmappen-Explorer auf die Package.appmanifest-Datei, um das Dialogfeld Package.appmanifest zu öffnen.
Klicken Sie auf die Registerkarte Deklarationen, und wählen Sie dann im Dropdownfeld Verfügbare Deklarationen die Option Hintergrundaufgaben aus.
Klicken Sie auf Hinzufügen, aktivieren Sie das Kontrollkästchen Audio, und klicken Sie auf OK.Hinweis Sie können die Deklaration für Hintergrundaudio auch erstellen, indem Sie den Code manuell hinzufügen. Um die Deklaration manuell vorzunehmen, fügen Sie den folgenden Code zwischen das <Application>-Tag und das </Application>-Tag in der Package.appmanifest-Datei ein:
```
<Extensions>
   <Extension Category="windows.backgroundTasks" StartPage="default.html">
      <BackgroundTasks>
             <Task Type="audio" />
      </BackgroundTasks>
   </Extension>
</Extensions>
```
Sie können auch eine Hintergrunddeklaration für einen Videodatenstrom erstellen, indem Sie dieselbe Manifestdatei verwenden, die Sie in den vorherigen Schritten für Audio erstellt haben. Legen Sie dazu das "Task Type"-Attribut auf audio fest.
Fügen Sie die Startseite Ihres Projekts in Start page: field hinzu. In der Regel ist dies default.html.

Schritt 2: Legen Sie für das msAudioCategory-Attribut den richtigen Wert fest

Klicken Sie im Bereich Projektmappen-Explorer auf die HTML-Datei, um diese zu öffnen. Wenn die HTML-Datei für Ihre App beispielsweise MyApp.htm heißt, klicken Sie zum Öffnen auf diese Datei.
Fügen Sie das msAudioCategory-Attribut zum <audio>-Tag hinzu, und legen Sie das Attribut entweder auf Communications oder BackgroundCapabaleMedia fest, wie im Folgenden dargestellt:
```
<audio msAudioCategory="BackgroundCapableMedia" controls="controls"> 
   <source src="Somesong.mp3"/> 
</audio>
```
Um msAudioCategory für einen Videodatenstrom festzulegen, verwenden Sie den folgenden Codeausschnitt:
```
<video msAudioCategory="BackgroundCapableMedia" controls="controls"> 
   <source src="Somevideo.mp4"/> 
</video >
```

Schritt 3: Unterstützung von "SystemMediaTransportControls"

In Windows 8.1 wird die SystemMediaTransportControls-Klasse eingeführt. Sie ersetzt die MediaControl-Klasse. Sie sollten SystemMediaTransportControls in Ihrer App verwenden. Der Vollständigkeit halber sind die Schritte zum Implementieren der Unterstützung für die Audiowiedergabe im Hintergrund mit dem MediaControl-Objekt unten aufgeführt, Sie sollten aber nur SystemMediaTransportControls verwenden. Ausführlichere Anweisungen zur Verwendung von SystemMediaTransportControls finden Sie unter So wird's gemacht: Verwenden der Systemsteuerelemente für den Medientransport.

Auch wenn eine App zum Wiedergeben von Audio im Hintergrund deklariert ist, muss sie die SystemMediaTransportControls-Schaltflächen für Wiedergabe und Anhalten aktivieren, indem sie isPlayEnabled und isPauseEnabled auf true festlegt. Außerdem muss die App das buttonpressed-Ereignis behandeln, das die App bei einer Betätigung der Systemsteuerelemente für den Medientransport benachrichtigt. Durch die Bereitstellung dieser Mindestunterstützung für die Ereignisbehandlung ermöglichen Sie es dem Benutzer, Audio wiederzugeben oder anzuhalten, ohne die App in den Vordergrund zu verschieben.

Neben dem Behandeln des buttonpressed-Ereignisses müssen Sie auch die SystemMediaTransportControls benachrichtigen, wenn sich der Medienstatus ändert (z. B. wenn das Medium angehalten oder wiedergegeben wird). Zum Benachrichtigen der SystemMediaTransportControl über Änderungen des Medienstatus legen Sie die playbackStatus-Eigenschaft auf einen der Werte in MediaPlaybackStatus fest.

Der folgende Code erstellt ein video -Objekt mit Ereignishandlern für paused-, playing- und ended-Ereignisse und richtet die SystemMediaTransportControls ein. Er aktiviert die Schaltflächen für Wiedergabe und Anhalten und fügt einen Ereignishandler für das buttonpressed-Ereignis hinzu. Die Ereignishandler für paused, playing und ended werden weiter unten in diesem Beispiel gezeigt.

<video id="mediaVideo" 
       controls 
       src="https://www.contoso.com/clip.mp4"
       onpause="mediaPaused(event)"
       onplaying="mediaPlaying(event)"
       onended="mediaEnded(event)" />

SystemMediaTransportControls systemControls;

public MainPage()
{
    this.InitializeComponent();

    // Hook up app to system transport controls.
    systemControls = SystemMediaTransportControls.GetForCurrentView();
    systemControls.ButtonPressed += SystemControls_ButtonPressed;

    // Register to handle the following system transpot control buttons.
    systemControls.IsPlayEnabled = true;
    systemControls.IsPauseEnabled = true;
}

Der folgende Code erstellt einen buttonpressed-Ereignishandler und Hilfsmethoden zum Wiedergeben und Anhalten des video-Objekts.

// Event handler for SystemMediaTransportControls' buttonpressed event
function systemMediaControlsButtonPressed(eventIn) {

    var mediaButton = Windows.Media.SystemMediaTransportControlsButton;

    switch (eventIn.button) {
        case mediaButton.play:
            playMedia();
            break;

        case mediaButton.pause:
            pauseMedia();
            break;

        case mediaButton.stop:
            stopMedia();
            break;

        // Insert additional case statements for other buttons you want to handle
    }
}

// Plays the media.
function playMedia() {
    var media = document.getElementById("mediaVideo");
    media.play();
}

// Pauses the media.
function pauseMedia() {
    var media = document.getElementById("mediaVideo");
    media.pause();
}

// Stops the media.
function stopMedia() {
    var media = document.getElementById("mediaVideo");
    media.pause();
    media.currentTime = 0;
}

Der folgende Code behandelt die Medienereignisse und aktualisiert die playbackStatus-Eigenschaft der SystemMediaTransportControls.

// The media Play event handler.
function mediaPlaying() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.playing;
}

// The media Pause event handler.
function mediaPaused() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.paused;
}

// The media Ended event handler.
function mediaEnded() {
    // Update the SystemMediaTransportControl state.
    systemMediaControls.playbackStatus = Windows.Media.MediaPlaybackStatus.stopped;
}

Weitere Informationen zum SystemMediaTransportControl finden Sie unter Verwenden der Systemsteuerelemente für den Medientransport und im SystemMediaTransportControls-Beispiel

Schritt 4: Registrieren von Steuerelementen für den Medientransport (Windows 8)

Wichtig

Die SystemMediaTransportControls-Klasse wurde in Windows 8.1 eingeführt und ersetzt die alte MediaControl-Klasse. Verwenden Sie die neue SystemMediaTransportControls-Klasse anstelle von MediaControl. Informationen zur Verwendung der SystemMediaTransportControls finden Sie unter So wird's gemacht: Verwenden der Systemsteuerelemente für den Medientransport.

Auch wenn eine App für die Hintergrundwiedergabe von Musik oder Video registriert ist, muss die App Ereignisse für die Wiedergabe-, die Pause- und die Wiedergabe/Pause-Schaltfläche behandeln. Durch die Bereitstellung dieser Mindestunterstützung zum Behandeln von Ereignissen ermöglichen Sie es dem Benutzer, den Musik- oder Videodatenstream im Hintergrund wiederzugeben oder anzuhalten, ohne dass die Anwendung in den Vordergrund geholt werden muss.

Um eine Medienschaltfläche für Ihre App zu registrieren, müssen Sie zunächst ein MediaControl-Objekt erstellen und einen Ereignislistener zum Objekt hinzufügen. Das Objekt überwacht dann auf die festgelegten Ereignisse. Sie müssen außerdem eine Funktion definieren, die aufgerufen wird, um das Ereignis zu behandeln, wenn es ausgelöst wird.

Klicken Sie im Projektmappen-Explorer auf die JavaScript-Datei Ihrer App, um sie zu öffnen. Wenn die JavaScript-Datei für Ihre App beispielsweise MyApp.js heißt, klicken Sie zum Öffnen auf diese Datei.

Verwenden Sie den folgenden Code, um die Schaltfläche zum Umschalten zwischen Wiedergabe und Pause für Ihre App zu registrieren:

// Declare a variable that you will use as an instance of an object
var mediaControls;

// Assign the button object to mediaControls
mediaControls = Windows.Media.MediaControl;

// Add an event listener for the Play, Pause Play/Pause toggle button
mediaControls.addEventListener("playpausetogglepressed", playpausetoggle, false);
mediaControls.addEventListener(“playpressed”, playbutton, false);
mediaControls.addEventListener(“pausepressed”, pausebutton, false);

Verwenden Sie den folgenden Code, um die Ereignisse zu behandeln, die ausgelöst werden, wenn die Schaltfläche zum Umschalten zwischen Wiedergabe und Pause gedrückt wird:

// The event handler for the play/pause button
function playpausetoggle() {
     if(mediaControls.isPlaying === true) {
              document.getElementById("audiotag").pause();
      } else {
              document.getElementById("audiotag").play();
      }
}

// The event handler for the pause button
function pausebutton() {
   document.getElementById("audiotag").pause();
}

// The event handler for the play button
function playbutton() {
   document.getElementById("audiotag").play();
}

Anmerkungen

Weitere Informationen zur Verwendung von Steuerelementen für den Medientransport finden Sie im Entwicklerhandbuch für Steuerelemente für den Systemtransport.

Hinweis Wenn Sie eine App haben, die zusätzlich zum Streaming von Audio und Video andere Aufgaben ausführt, und die App wird in den Hintergrund gewechselt (das Fenster ist nicht mehr aktiv), sollte Ihre App keine Funktionen mehr ausführen, die nicht mit Medien verbunden sind. Ihre App kann weiterhin Audio wiedergeben. Im Falle eines Audio-Video-Datenstroms wird der Videodatenstrom automatisch angehalten. Schnellstart: Wiedergeben von Videos in einer App

Vollständiges Beispiel

Vollständige Beispiele zum Streaming von Audio und Video finden Sie im Beispiel zum Wiedergabe-Manager und im Beispiel für die HTML-Medienwiedergabe.

Freigeben über