Comment configurer les touches pour les contrôles multimédias (HTML)(Windows 8)

Article
02/12/2016

[ 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 montre comment configurer les touches de support matériel sur un clavier, puis utiliser les touches configurées pour contrôler un flux AV (audio-vidéo) en appuyant ou en cliquant sur lecture, pause, arrêt, etc.

Important

La classe SystemMediaTransportControls introduite dans Windows 8.1 remplace l’ancienne classe MediaControl. Vous devez utiliser la nouvelle classe SystemMediaTransportControls à la place de MediaControl.

Après avoir effectué cet exercice, vous comprendrez comment configurer les touches de clavier qui peuvent manipuler un flux AV.

Ce que vous devez savoir

Technologies

Windows Runtime

Prérequis

Vous devez être familiarisé avec le code HTML, le langage JavaScript, les événements Windows et la gestion des événements.
Vous devez avoir un lecteur multimédia installé capable de lire des fichiers MP3 (MPEG-Layer 3) ou d’autres fichiers musicaux numériques.

Instructions

Étape 1: Inscrivez-vous pour des événements d’enfoncement de bouton puis gérez-les

L’exemple MediaButtons configure les événements de transport de médias. Il écoute ensuite pour repérer les événements provenant des boutons de contrôle multimédia, y compris les boutons Chaîne suivante et Chaîne précédente. La fenêtre de contrôle du transport s’affiche en réaction aux boutons utilisés, afin de fournir une confirmation visuelle que l’événement d’enfoncement de bouton a été pris en compte.

Voici le code JavaScript requis pour l’inscription et la gestion des événements :

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

Étape 2: Désactiver les boutons appropriés

Au début de la playlist, il n’y a pas de piste précédente. Par conséquent, le bouton Piste précédente est désactivé pour la première piste audio de l’exemple. De même, puisqu’il n’y a aucune piste suivante à la fin de la playlist, le bouton Piste suivante est désactivé.

Voici un extrait de code JavaScript qui montre comment désactiver les boutons Piste précédente et Piste suivante en supprimant leurs détecteurs d’événement dans l’objet MediaControl :

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

Étape 3: Activer les boutons appropriés

Après la première piste, mais avant la dernière, les boutons Piste précédente et Piste suivante sont désactivés. Si votre playlist contient plus de trois pistes, lorsque votre application audio lit une autre piste que la première ou la dernière, il est recommandé d’activer les boutons Piste précédente et Piste suivante.

Voici un extrait de code JavaScript qui montre comment activer les boutons Piste précédente et Piste suivante en ajoutant leurs détecteurs d’événement dans l’objet MediaControl :

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

Étape 4: Exécuter et tester l’exemple CallControl

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 consulter la build et d’autres instructions pour cet exemple, ainsi que le code complet, consultez Configurer les touches pour les contrôles multimédias.

Remarques

Le code que vous venez de créer et de tester vous a permis de configurer les touches de support matériel, en créant des détecteurs d’événement et des gestionnaires d’événement pour les différentes touches. La fenêtre de contrôle du transport s’affiche en réaction aux boutons utilisés. Elle vous fournit une confirmation visuelle que les détecteurs et gestionnaires d’événement fonctionnent correctement.

Pour obtenir des conseils de développement et plus d’informations sur les autres événements pris en charge pour les boutons de contrôle multimédia, voir Recommandations concernant le développement d’applications prenant en charge l’audio et Contrôles de transport système.