So wird’s gemacht: Konfigurieren von Schaltflächen zur Mediensteuerung (HTML)(Windows 8)

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 ]

Dieses Lernprogramm zeigt Ihnen die Konfiguration der Hardwaremedientasten auf einer Tastatur und die Verwendung der konfigurierten Tasten, um einen Audio-Video-(AV)-Datenstrom zu steuern, indem Sie die Tasten für die Wiedergabe, Pause, Stopp usw. verwenden.

Wichtig

Die in Windows 8.1 eingeführte SystemMediaTransportControls-Klasse ersetzt die alte MediaControl-Klasse. Verwenden Sie die neue SystemMediaTransportControls-Klasse anstelle von MediaControl.

Nach Abschluss dieser Übung wissen Sie, wie Sie Tasten einer Tastatur konfigurieren, um einen AV-Datenstrom zu beeinflussen.

Wissenswertes

Technologien

Windows Runtime

Voraussetzungen

Sie müssen mit HTML, JavaScript, Windows-Ereignissen und dem Behandeln von Ereignissen vertraut sein.
Es muss ein Media Player installiert sein, der MP3-Dateien (MPEG-Layer 3) oder andere digitale Musikdateien wiedergeben kann.

Anweisungen

Schritt 1: Registrieren für Tastenbetätigungsereignisse und ihre anschließende Verarbeitung

Im MediaButtons-Beispiel werden Medientransportereignisse konfiguriert. Es lauscht dann nach den Ereignissen von den Mediensteuerelementtasten, einschließlich der Tasten für den nächsten und vorherigen Kanal. Als Reaktion auf jeden Tastendruck wird das Transportsteuerelementfenster angezeigt, um eine visuelle Rückmeldung zu geben, dass das Ereignis erkannt wurde und verarbeitet wird.

Dies ist der JavaScript-Code zum Registrieren für Ereignisse und zum Verarbeiten dieser Ereignisse:

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

// Add event listeners for the buttons
MediaControls.addEventListener(“playpressed”, play, false);
MediaControls.addEventListener(“pausepressed”, pause, false);
MediaControls.addEventListener(“playpausetogglepressed”, playpausetoggle, false);

// Add event listeners for the audio element
document.GetElementById(“audiotag”).addEventListener(“playing”, playing, false);
document.GetElementById(“audiotag”).addEventListener(“paused”, paused, false);
document.GetElementById(“audiotag”).addEventListener(“ended”, ended, false);

// Define functions that will be the event handlers
function play() {
    document.getElementById(“audiotag”).play();
}
function pause() {
    document.getElementById(“audiotag”).pause();
}

function playpausetoggle() {
    if(MediaControls.isPlaying === true) {
        document.getElementById(“audiotag”).pause();
    } else {
        document.getElementById(“audiotag”).play();
    }
}

function playing() {
    MediaControls.isPlaying = true;
}

function paused() {
    MediaControls.isPlaying = false;
}

function ended() {
    MediaControls.isPlaying = false;
}

Schritt 2: Deaktivieren der entsprechenden Tasten

Am Anfang der Wiedergabeliste befindet sich kein vorheriger Titel. Daher ist die Taste "Vorheriger Titel" für den ersten Audiotitel im Beispiel deaktiviert. Gleichermaßen gibt es am Ende der Wiedergabeliste keinen nächsten Titel, deshalb ist die Taste "Nächster Titel" deaktiviert.

Dies ist ein JavaScript-Codeausschnitt, in dem das Deaktivieren der Tasten "Vorheriger Titel" und "Nächster Titel" durch Entfernen ihrer Ereignislistener aus dem MediaControl-Objekt dargestellt ist:

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

// Disable the previous track button
MediaControls.removeEventListener(“previoustrackpressed”, previoustrack);

// Disable the next track button
MediaControls.removeEventListener(“nexttrackpressed”, nexttrack);

Schritt 3: Aktivieren der entsprechenden Tasten

Nach dem ersten und vor dem letzten Titel sind die Tasten "Vorheriger Titel" und "Nächster Titel" aktiviert. Falls Ihre Wiedergabeliste mindestens drei Titel enthält, wird empfohlen, die Tasten "Vorheriger Titel" und "Nächster Titel" zu aktivieren, wenn Ihre App einen anderen Titel als den ersten oder letzten Titel wiedergibt.

Dies ist ein JavaScript-Codeausschnitt, in dem das Aktivieren der Tasten "Vorheriger Titel" und "Nächster Titel" durch Hinzufügen ihrer Ereignislistener aus dem MediaControl-Objekt dargestellt ist:

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

// Enable the previous track button
MediaControls.addEventListener(“previoustrackpressed”, previoustrack, false);

// Enable the next track button
MediaControls.addEventListener(“nexttrackpressed”, nexttrack, false);

Schritt 4: Ausführen und Testen des CallControl-Beispiels

Ausführliche Anleitungen zum Erstellen, Ausführen und Testen dieses Beispiels sind in der zugehörigen Beschreibung enthalten. Das erstellte Beispiel und andere Anleitungen für dieses Beispiel sowie die vollständige Liste finden Sie unter Konfigurieren von Tasten für Mediensteuerelemente.

Anmerkungen

Mit dem gerade von Ihnen erstellten und getesteten Code können Sie die Hardwaremedientasten konfigurieren, indem Sie Ereignislistener und Ereignishandler für die verschiedenen Tasten erstellen. Als Reaktion auf die Tastenbetätigung wurde das Transportsteuerelementfenster auf dem Bildschirm angezeigt. Dadurch konnten Sie überprüfen, ob die Ereignislistener und -handler ordnungsgemäß ausgeführt wurden.

Einen Leitfaden für Entwickler und weitere Informationen über die anderen unterstützten Ereignisse für Mediensteuerungstasten finden Sie unter Richtlinien für das Entwickeln audiofähiger Apps und Steuerelemente für den Systemtransport.