Astuce expert : créer une playlist pour son site avec Audio.js

Vous êtes musicien et vous souhaitez mettre une playlist avec vos compositions sur votre site WebAcappella ? Aujourd’hui la team vous présente une astuce qui vous permettra de créer une playlist à l’aide du lecteur Audio.js. Cette astuce est compatible avec la version 4 de WebAcappella, car il s’agit d’un lecteur en HTML 5.

tableau_audioPour rappel vous trouverez ci-contre un tableau récapitulatif, non exhaustif, de compatibilité audio.

Comme vous pouvez le constater sur le tableau, aucun navigateur ne supporte tous les formats. Le format Wav est le plus compatible mais également le plus lourd en taille, suivi des formats MP3 et Ogg Vorbis.

Intégrer un lecteur audio avec la PLAYLIST

Playlist-screenshotLe code que nous vous fournissons dans cet article est libre de droits, puisqu’il est sous Licence MIT (Massachusetts institute of technology).

Un autre avantage de ce code c’est que l’on va se servir des balises href dans la zone de code HTML, ce qui va permettre de pointer vers n’importe quel lien (sur son dossier distant ou sur un autre site).

Ensuite, téléchargez et dézippez le dossier contenant les fichiers en cliquant sur le lien suivant : audiojs. Voici le détail des fichiers que vous allez trouver :

  • fichier audio.min.js
  • fichier player-graphics.gif

Copier ce dossier (audiojs) à la racine de votre projet de site dans le dossier distant de votre hébergeur à l’aide d’un client FTP de type Filezilla. Afin que cela fonctionne bien, il est important également de conserver son nom d’origine.

A déclarer dans le HEAD

Téléchargez et dézippez le fichier header, vous obtiendrez le fichier header.rtf qu’il faudra ouvrir sur votre ordinateur, puis copier/coller le code contenu dans ce fichier dans la partie « Head » de WebAcappella (menu “site web”, “propriétés du site web”, puis 4ème onglet). A noter que la partie « style » n’est pas obligatoire mais elle apporte un bien meilleur rendu !

Ensuite, insérez la partie visible de cet élément sonore dans la page de votre choix de votre site. Créez une zone de code HTML et collez le code suivant :

<div id="wrapper">
<h1>PLAYLIST <em>(2009)</em></h1> /*Titre de la liste à jouer*/
<audio preload></audio> /*pre-chargement de la piste audio*/
<ol>
<li><a href="#" data-src="http://xxxx.ovh.net/~xxx/mp3/spring.mp3">VIVALDI - LES 4 Quatre Saisons</a></li> /*lien de la 1ere piste audio qui se situe dans cet exemple, dans un dossier qui se nomme mp3 de votre dossier distant*/
<li><a href="#" data-src="http://xxxx.ovh.net/~azerty/mp3/brigadier.mp3">BRIGADIER</a></li>/*lien de la 1ere piste audio qui se situe dans cet exemple, dans un dossier qui se nomme mp3 de votre dossier distant*/
<li><a href="#" data-src="http://xxx.ovh.net/~aaa/mp3/spring.wav">it's all about the crystalizabeths</a></li>/*lien de la 1ere piste audio qui se situe dans cet exemple, dans un dossier qui se nomme mp3 de votre dossier distant*/
<li><a href="#" data-src="http://s3.amazonaws.com/audiojs/04-islands-is-the-limit.mp3">islands is the limit</a></li> /*lien d’une piste audio qui dans cet exemple, pointe vers un fichier en ligne*/
</ol>
</div>

Changez les informations concernant les fichiers par les informations sur vos fichiers audio. Attention à l’orthographe donné à vos liens, l’écriture est sensible à la casse ! (ex : Spring.wav ≠ spring.wav).

A noter : vous pouvez intégrer le format audio que vous souhaitez (voir le tableau en haut pour connaître les compatibilités selon le navigateur utilisé).

Voilà, votre playlist est prête ! A très bientôt pour une prochaine astuce sur le blog WebAcappella !

6 Comments

  1. MetalOS

    Super astuce, merci beaucoup.

  2. noobactu

    Merci pour cette astuce intéressante car c’est vraie que le java srcript n’est pas simple a utilisé surtout pour des personnes qui n’y connaissent rien, bref j’avais une question importante pouvez vous amélioré « l’élément sonore dans webacappella  » car ont peut mettre des dizaine de musique mais les personnes qui visite un site internet n’aime pas forcément le type de musique que l’on aime et pour cela ces personnes ne peuvent pas changer les musiques car il n’y a pas de fléche pour pouvoir changer je trouve sa très dommage serait t’il possible d’en rajouter et si c’est possible de customisé son élément sonore^^ ??
    Cordialement,
    Noobactu votre fidèle FAN 🙂

    • Team WebAcappella

      Bonjour Noobactu !
      Merci pour votre commentaire. 🙂
      Le but de cette astuce avec audio js est de proposer une playlist qui tourne toute seule sur un site.
      Nous n’avons pas prévu de modifications sur le lecteur audio intégré dans WebAcappella pour le moment.

  3. EveryThingsAllright

    Bonjour, pouvons-nous avoir une capture d’écran pour voir le résultat ? Merci.

    • Team WebAcappella

      Bonjour !
      Nous avons ajouté une capture d’écran dans l’article avec la playlist. 🙂

      • EveryThingsAllright

        Merci !

Commentaires fermés