Suite du tutorial sur le développement d’application pour Windows 8 Metro sur la stack HTML5. Jusque là, on a pas vraiment utilisé ce qui fait « HTML5 », c’est-à-dire les nouvelles APIs disponibles. Ici, on va utiliser le tag <audio> qui fonctionne plutôt bien dans IE10 pour jouer le rôle de lecteur multimedia:

HTML5 <audio> Tag

Placement dans l’interface : Utilisation de l’App Bar Windows 8

Avant de commencer à coder, on va se poser une question importante. Où mettre notre lecteur audio.

On pourrait le mettre dans une page mais cela ne serait pas très pratique, car il disparaîtrait lors de la navigation et il faudrait toujours revenir sur la page pour mettre en pause par exemple.

On pourrait aussi le mettre dans la page « default.html », la page « statique » celle qui charge les autres pages. Mais on ne veut pas que le lecteur soit présent en permanence, ce n’est pas très esthétique, cela va réduire la place de toutes nos vues. Il faudrait que l’on puisse afficher / masquer facilement le lecteur audio, ce serait top.

En cherchant un peu, il existe un comportement qui est encouragé dans  la création d’application Windows 8. Il y a en fait un composant nommé App Bar (WinJS.UI.AppBar), prévu dans toutes les applications WinJS, qui peut apparaître en haut ou en bas de l’application.

WinJS.UI.AppBar object

A la souris, l’affichage se fait par un click droit et sur tablette tactile Windows 8 (ou Win+z), l’affichage de l’AppBar se fait par un « swipe » depuis le bord de l’écran vers l’intérieur. Il est possible de mettre des boutons de type AppBarCommand, un composant WinJS bien pratique pour faire de jolis boutons sans trop forcer:

WinJS.UI.AppBarCommand object

Voici à quoi ressemble une AppBar avec quelques AppBarCommand:

Créer une AppBar simple

Une AppBar est déjà ajoutée dans un projet basé sur le template « Navigation ». Rendez-vous dans default.html et décommentez le bloc correspondant:

    <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"></button>
    </div>

Lancez votre application et faites un click droit dans le vide. L’AppBar apparaît:

Dans cette AppBar, vous pouvez placer des button de type AppBarCommand et des séparateurs <hr>.

Mettez donc un composant « <audio> » pour voir:

    <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <audio id="mediaPlayer"></audio>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"></button>
    </div>

Lancez votre application et boum, crash de l’application sans aucune précision:

C’est la joie du développement Windows 8-style UI sous Visual Studio, certains crash sont tout sauf explicites. Ici, aucun message d’erreur, aucun warning et impossible de revenir à la méthode qui a fait planter l’application.

J’ai bien passé une heure à chercher d’où venait ce bug étrange, je vais donc vous passer ce moment frustrant ;)

Créer une AppBar « complexe » (=qui ne contient pas que des AppBarCommand)

Essayez avec d’autres composant que des WinJS.UI.AppBarCommand et vous aurez systématiquement un crash. D’ailleurs, même un <hr> simple doit être déclaré comme un composant AppBarCommand.  Si vous regardez la documentation:

http://msdn.microsoft.com/en-us/library/windows/apps/Hh465309(v=win.10).aspx

Vous trouverez en bas de page:

Note  You can use only AppBarCommands in an app bar.

Ce n’est pas 100% vrai. Vous pouvez en fait ajouter d’autres composants si vous modifiez l’option « layout » de l’AppBar:

AppBar.layout property

Cette fois la remarque a plus de sens:

You can put only AppBarCommands inside an app bar with the « commands » layout.

Mais il est dit plus haut dans la doc que l’on peu mettre « custom » comme layout pour faire ce que l’on souhaite. Au passage, on va aussi fixer le paramètre « sticky », qui fait que l’AppBar ne disparaît pas quand on clique sur l’interface, simplement quand on fait un click droit ou un swipe.

Reprenons donc notre exemple:

    <div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom', sticky:true}">
        <audio id="mediaPlayer"></audio>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"></button>
    </div>

Relancez votre application, elle ne crash plus. Cool :).

Personnalisation du lecteur audio

Pour l’instant notre lecteur audio n’est pas visible, il manque encore quelques paramètres. On va déjà le mettre en lecture automatique avec l’attribut « autoplay ». Notez que vous pouvez le mettre de manière bâtarde dans votre tag HTML audio sans valeur, l’important c’est qu’il soit là. On va aussi fixer l’attribut « controls » à la valeur « controls » pour que le bouton play / stop s’affiche ainsi que le slider pour régler le volume.

Comme on ne joue pas forcement le titre de la page sur laquelle on est, on va rappeler le titre dans l’interface. Les styles CSS sont un peu « en dur » mais je galère toujours avec le CSS, c’est la seule manière que j’ai trouvé pour faire l’alignement:

    <div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom'}">
        <audio id="mediaPlayer" autoplay controls="controls" style="height:80px;float:left;width:600px"></audio>
        <span id="mediaPlayerTitle" class="win-type-ellipsis" style="position:absolute;top:10px; left:20px;width:600px">Titre du morceau...</span>
    </div>

Résultat:

Lecture d’un fichier audio provenant de SoundCloud en streaming

Peut-être comme moi, vous avez lu beaucoup d’articles sur les divergences de format audio au sein des lecteurs audio intégrés aux navigateurs (OGG, MP3, …). Bonne surprise, le lien « stream_url » est directement compatible avec le lecteur audio de Windows 8 :).

On récupère depuis SC une adresse dans « stream_url » comme ceci:

https://api.soundcloud.com/tracks/52382638/stream

A laquelle il faut ajouter son client_id comme toujours:

https://api.soundcloud.com/tracks/52382638/stream?client_id=2e601fddcc4a07954c3da7077f81a1e1

Cela redirige vers un MP3 qui peut être lu directement par <audio>. Il nous suffit maintenant de l’assigner en JS dans la méthode « ready » de track.js:

            // play
            var mediaPlayer = document.getElementById("mediaPlayer");
            mediaPlayer.src = this.track.stream_url;
            var mediaPlayerTitle = document.getElementById("mediaPlayerTitle");
            mediaPlayerTitle.innerHTML = this.track.title + " by " + this.track.user.username;
            var appbar = document.getElementById("appbar");
            appbar.winControl.show();
        },

Ici, on assigne la source (propriété « src » de <audio>) à notre stream_url (le client_id a été ajouté lors du post-traitement) puis on donne le titre et on force l’affichage de l’AppBar. Résultat, lorsque vous accédez à la page d’un titre:

Conclusion

Dans cette partie, vous avez vu comment créer une AppBar pour application Windows 8 Metro, ses deux layout et l’utilisation simple de la balise <audio> HTML5.