Mon application « Clouder! » permet de lire des morceaux directement depuis SoundCloud avec le tag <audio> HTML5. Tant que vous restez dans l’application, vous pouvez donc jouer des titres mais dès que vous passez sur une autre application ou que vous revenez sur le menu démarrer, le son va se couper. C’est le comportement par défaut des applications Windows 8 Metro.

Pour pouvoir continuer à jouer des morceaux en background, il faut que votre application remplisse plusieurs conditions:

• Que dans le manifest de l’application, vous ajoutiez une déclaration de « Background Tasks » de type Audio
• Que vous ajoutiez le paramètre « msAudioCategory » à votre tag <audio>
• Que vous utilisiez les Media Transport Controls (liaison avec des évènements système)

Une fois ces conditions remplies, votre application pourra jouer de l’audio en background. Voici les documentation qui vous seront utiles:

• Quickstart: adding audio to an app (Metro style apps using JavaScript and HTML)
• System Transport Controls Developer Guide
• How to configure keys for media controls (Metro style apps using JavaScript and HTML)
• Configure keys for media sample

Modifier le manifest de l’application

Très simple, avec VisualStudio, ouvrez le fichier package.appxmanifest qui se trouve à la racine de votre projet. Dans l’onglet « Declarations », ajouter une « Background Task » puis cochez « Audio » et donnez le lien vers votre page de démarrage (default.html) si besoin est:

Enregistrez bien le fichier.

Ajout du paramètre au tag <audio>

Il existe un paramètre nommé « msAudioCategory » qui n’est pas un paramètre W3C du tag <audio> mais que Windows saura reconnaître et interprété. Celui-ci peut prendre plusieurs valeurs, suivant le type d’audio que votre application joue (musique, radio, sons de jeu, …). Un résumé est donné en milieu de page:

Quickstart: adding audio to an app (Metro style apps using JavaScript and HTML)

Dans notre cas, c’est « BackgroundCapableMedia » que l’on va utiliser (musique en streaming pouvant être en arrière plan). Mon tag <audio> ressemble donc à :

<audio id="mediaPlayer" autoplay controls="controls" msAudioCategory="backgroundcapablemedia" ></

Utilisation des Media Transport Controls

Voici la partie qui est partiellement abordée dans certaines documentations de Microsoft et pourtant, elle est obligatoire pour que cela fonctionne. Windows 8 permet de contrôler les boutons physiques (hardware) du matériel sur lequel il tourne. Par exemple sur une tablette, les boutons volume +/- ou sur un laptop, un éventuel bouton play/pause.

Vous allez devoir lier ces boutons système à votre application pour que le son se coupe si l’utilisateur appuie sur le bouton pause de son clavier. Vous devrez aussi informer Windows 8 que votre application est en train de jouer ou pas un titre.

Pour cela, on va se servir des évènement dispatchés par l’objet Windows.Media.MediaControl. Voici un exemple de code que vous devrez ajouter dans votre application pour lier les 2:

// background audio
var mediaPlayer = document.getElementById("mediaPlayer");
var mediaControls = Windows.Media.MediaControl;

// Add event listeners for the buttons
mediaControls.addEventListener("playpausetogglepressed", playPauseTogglePressed, false);
mediaControls.addEventListener("playpressed", playPressed, false);
mediaControls.addEventListener("stoppressed", pausePressed, false);
mediaControls.addEventListener("pausepressed", pausePressed, false);

// Add event listeners for the audio element
mediaPlayer.addEventListener("playing", onPlaying, false);
mediaPlayer.addEventListener("pause", onPaused, false);
mediaPlayer.addEventListener("ended", onEnded, false);

function playPressed() {
    mediaPlayer.play();
}
function pausePressed() {
    mediaPlayer.pause();
}

function playPauseTogglePressed() {
    if (Windows.Media.MediaControl.isPlaying) {
        mediaPlayer.pause();
    } else {
        mediaPlayer.play();
    }
}

function onPlaying() {
    Windows.Media.MediaControl.isPlaying = true;
}

function onPaused() {
    Windows.Media.MediaControl.isPlaying = false;
}

function onEnded() {
    Windows.Media.MediaControl.isPlaying = false;
}

Vous devrez enregistrer au moins les évènements qui concernent play / pause pour que cela fonctionne. Vous pouvez voir que l’on fait la communication dans les deux sens

Ajout de métadonnées au composant natif Windows 8: Artiste et titre

Vous pouvez indiquer à Windows 8 des métadonnées sur le titre joué, notamment le titre, l’artiste et même la pochette du titre.

Pour le titre et l’artiste, très simple, il suffit de fixer les propriétés trackName et artistName:

        var mediaControls = Windows.Media.MediaControl;
        mediaControls.trackName = currentTrack.title;
        mediaControls.artistName = currentTrack.user.username;

Voici ce que cela donne quand vous appuyez sur un bouton hardware:

Pour la pochette, c’est plus complexe, car il faut absolument que l’url du fichier image soit de type « ms-appx:// » ou « ms-appdata:// »:

http://msdn.microsoft.com/en-us/library/windows/apps/windows.media.mediacontrol.albumart.aspx

Si vous avez une image externe, il faudra donc l’enregistrer sur le disque et donner le lien vers cette image locale. Un exemple est donné dans le document suivant:

System Transport Controls Developer Guide

Il y a aussi la possibilité de s’enregistrer sur d’autres évènements non-obligatoire comme le son ou le changement dans une playlist, je vous laisse voir ça dans le document si c’est votre cas.

Bug sur la version Release Preview?

Durant mes tests, j’ai trouvé ce qui semble être un bug dans Windows 8 / WinJS. En utilisant le bouton hardware play/pause de mon clavier, parfois le morceau faisait la bascule play / pause en continu, ce qui produit un effet bizarre. J’ai pu reproduire ce bug (assez aléatoire) avec les samples de Microsoft. En fait, l’évènement « playpausetogglepressed » est déclenché sans arrêt et donc la bascule se fait sans arrêt (voir le code ci-dessus).

J’ai posté un sujet sur le forum de développement Windows 8, on ne sait jamais:

Known issue with MediaControl and the « playpausetogglepressed » triggered randomly ? (Release Preview)