Comment lire du contenu audio en arrière-plan (HTML)

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 vous montre comment sélectionner la catégorie appropriée pour un flux audio/vidéo (AV) afin de le configurer à des fins de lecture en arrière-plan.

Remarque Si le flux vidéo est placé dans la bonne catégorie en vue de sa lecture, lorsque la vidéo passera en mode arrière-plan, vous entendrez alors la portion audio mais ne verrez pas la vidéo qui l’accompagne. Ce comportement est délibéré et réduit les exigences du périphérique en matière de consommation d’énergie lorsqu’il lit la vidéo en arrière-plan.

Pour voir cette fonctionnalité en action dans un exemple de lecture de média complet, voir Lecture de média de A à Z.

Prérequis

Vous devez vous familiariser avec le code HTML, le langage JavaScript, les événements Windows et la gestion des événements.
Vous devez avoir installé une instance de Microsoft Visual Studio.
Vous devez disposer d’une application capable de diffuser des éléments audio et vidéo. Pour plus d’informations sur la méthode la plus simple pour cela, voir Démarrage rapide : le son dans une application du Windows Store et Démarrage rapide : vidéo et audio.

Instructions

Étape 1: Effectuer une déclaration audio en arrière-plan dans le manifeste de l’application

Ouvrez le fichier projet de votre application dans Microsoft Visual Studio.
Dans l’Explorateur de solutions, double-cliquez sur le fichier Package.appmanifest pour ouvrir la boîte de dialogue Package.appmanifest.
Cliquez sur l’onglet Déclarations, puis sélectionnez Tâches en arrière-plan dans la liste déroulante Déclarations disponibles.
Cliquez sur Ajouter, activez la case à cocher Audio, puis cliquez sur OK.Remarque Vous pouvez également effectuer la déclaration pour l’audio en arrière-plan en ajoutant le code manuellement. Pour effectuer la déclaration manuellement, ajoutez le code suivant entre les balises <Application> et </Application> au sein du fichier Package.appmanifest :
```
<Extensions>
   <Extension Category="windows.backgroundTasks" StartPage="default.html">
      <BackgroundTasks>
             <Task Type="audio" />
      </BackgroundTasks>
   </Extension>
</Extensions>
```
Vous pouvez aussi soumettre une déclaration en arrière-plan pour un flux vidéo en utilisant le même fichier manifeste que celui que vous avez créé pour l’audio au cours des étapes précédentes. Pour ce faire, affectez à l’attribut « Task Type » la valeur audio.
Ajoutez la page de démarrage de votre projet au Start page: field. Il s’agit normalement de default.html.

Étape 2: Définir l’attribut msAudioCategory avec la valeur correcte

Dans le volet Explorateur de solutions, cliquez sur le fichier HTML pour l’ouvrir. Par exemple, si le fichier HTML de votre application s’appelle MyApp.htm, cliquez alors sur ce fichier pour l’ouvrir.
Ajoutez l’attribut « msAudioCategory » à la balise <audio> et définissez cet attribut sur Communications ou sur BackgroundCapabaleMedia comme suit :
```
<audio msAudioCategory="BackgroundCapableMedia" controls="controls"> 
   <source src="Somesong.mp3"/> 
</audio>
```
Si vous définissez msAudioCategory pour un flux vidéo, utilisez l’extrait de code suivant :
```
<video msAudioCategory="BackgroundCapableMedia" controls="controls"> 
   <source src="Somevideo.mp4"/> 
</video >
```

Étape 3: Prendre en charge SystemMediaTransportControls

Windows 8.1 introduit la classe SystemMediaTransportControls qui remplace la classe MediaControl. Vous devez utiliser SystemMediaTransportControls dans votre application. Par souci d’exhaustivité, les étapes permettant d’implémenter la prise en charge audio en arrière-plan avec la classe MediaControl sont incluses ci-dessous, mais vous devez uniquement utiliser la classe SystemMediaTransportControls. Voir Comment utiliser les contrôles de transport de média système pour approfondir l’utilisation de SystemMediaTransportControls.

Même si une application est déclarée pour la lecture audio en arrière-plan, l’application doit activer les boutons de lecture et de mise en pause SystemMediaTransportControls en affectant à isPlayEnabled et isPauseEnabled la valeur true. L’application doit également gérer l’événement buttonpressed, qui notifie l’application quand l’utilisateur appuie sur les boutons de contrôle de transport de média système. En offrant cette prise en charge pour une gestion minimale des événements, l’utilisateur peut lire ou mettre en pause le contenu audio sans ramener l’application au premier plan.

En complément de la gestion de l’événement buttonpressed, vous devez également envoyer des notifications à la classe SystemMediaTransportControls quand l’état du média est modifié, s’il est en pause ou en cours de lecture par exemple. Pour envoyer des notifications à la classe SystemMediaTransportControl concernant la modification de l’état du média, affectez à sa propriété playbackStatus l’une des valeurs dans MediaPlaybackStatus.

Le code ci-dessous crée un objet video avec des gestionnaires d’événements pour les événements paused, playing et ended, puis définit SystemMediaTransportControls. Il active les boutons de lecture et de mise en pause et ajoute un gestionnaire d’événements pour l’événement buttonpressed. Les gestionnaires d’événements pour paused, playing et ended sont présentés plus loin dans cet exemple.

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

Voici le code qui crée un gestionnaire d’événements buttonpressed et des méthodes d’assistance pour lire et mettre en pause l’objet video.

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

Voici le code qui gère les événements multimédias et qui met à jour la propriété playbackStatus de 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;
}

Pour plus d’informations sur la classe SystemMediaTransportControl, voir Comment utiliser les contrôles de transport de média système et l’exemple d’utilisation de SystemMediaTransportControls

Étape 4: Inscrire les contrôles de transport de média (Windows 8)

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. Pour plus d’informations sur l’utilisation de SystemMediaTransportControls, voir Comment utiliser les contrôles de transport de média système.

Même si une application est inscrite pour lire de la musique ou une vidéo en arrière-plan, l’application doit gérer les événements pour les boutons Lecture, Pause et Lecture/Pause. Grâce à cette prise en charge pour une gestion minimale des événements, l’utilisateur peut lire ou suspendre un flux musical ou vidéo en arrière-plan sans ramener l’application au premier plan.

Pour inscrire un bouton multimédia avec votre application, vous devez d’abord créer un objet MediaControl et ajoutez un détecteur d’événements à cet objet. L’objet peut ensuite écouter les événements que vous spécifiez. Il vous faut aussi définir une fonction qui sera appelée pour gérer l’événement lors du déclenchement de ce dernier.

Dans le volet Explorateur de solutions, cliquez sur le fichier JavaScript de votre application pour l’ouvrir. Par exemple, si le fichier JavaScript de votre application s’appelle MyApp.js, cliquez alors sur ce fichier pour l’ouvrir.

Utilisez le code suivant pour inscrire les boutons bascule Lecture, Pause et Lecture/Pause pour votre application :

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

Utilisez le code suivant pour gérer les événements qui sont déclenchés lorsque vous appuyez sur les boutons bascule Lecture, Pause et Lecture/Pause :

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

Remarques

Pour plus d’informations sur l’utilisation des contrôles de transport de média, reportez-vous au livre blanc Guide du développeur sur les contrôles de transport système.

Remarque Si vous disposez d’une application qui réalise d’autres tâches en dehors de la diffusion d’éléments audio ou vidéo, votre application doit cesser toutes les tâches sans rapport avec du multimédia lorsqu’elle perd le focus et ne constitue plus la fenêtre active. Votre application peut toujours diffuser du contenu et, dans le cas d’un flux audio/vidéo, la diffusion vidéo sera automatiquement arrêtée. Démarrage rapide : lecture de vidéos dans une application