Mettre une playlist sur sa page web

[abFab]

Je continue sur la lancée d'un billet de blog, ici :
http://rapidos.ladistroy.fr/main/index. ... e-web.html

La question est de savoir comment intégrer une playliste sur une page web.

!! Ceci n'est pas un tutoriel générique à vocation exemplaire... c'est juste la retranscription de ce que moi je fais. Ici c'est pas du codage nazi, c'est du codage marmiton. Voici ma recette, faisez-en bon usage (ou pas).


1. Lire un seul morceau

Depuis quelques années maintenant, on est plus obligé de passer par un lecteur flash, on peut utiliser directement les balises <audio>. Seule contrainte, il faut doubler les fichiers sons : tous les navigateurs (qui ont moins de 5 ans) connaissent la balise <audio> mais tous ne lisent pas tous les formats. Vous pouvez tester votre navigateur ici, par exemple :
http://perso.jojaba.fr/html5/audio.html
Pour être sûr d'être lu par tous vos visiteurs, il faudra mettre du OGG et du MP3.
Vous mettez vos OGG et vos MP3 dans un répertoire "sounds, et vous intégrez ce bout de code HTML dans votre page :

Code : Tout sélectionner

<audio controls>
  <source src="sounds/titre1.ogg">
  <source src="sounds/titre1.mp3">
</audio>

Si le navigateur de votre visiteur ne sait pas lire le OGG, il ira lire le mp3.

Mais l'utilisation basique de la balise <audio> ne permet que de lire un seul morceau !

2. Un lecteur de playlist.

2.1 Faire le lecteur

Ma recette de lecteur de playliste. Perso j'utilise le JPlayer : http://jplayer.org/
Il y en a d'autres, mais pour être franc j'ai vu beaucoup plus de bandcamp intégrés dans des pages web que de solutions DIY.
(oui ça y est j'ai casé ma ralouze)
(on peut poursuivre)
Cela dit, le JPlayer, à utiliser, au premier abord c'est pas super super simple. Quand on y regarde de plus près, il suffit juste de télécharger le merdier et de modifier le fichier "index.php" pour entrer la playliste au bon endroit... sans péter le reste.
Ca peut intimider.
Plutôt que de rentrer dans des détails voués à catalyser la fastidiosité du quotidien, je vous mets à dispo mon JPlayer customisé :
http://punxrezo.net/pg/file/read/53186/ ... a-page-web

Le principe est assez simple. Vous le téléchargez, vous le dézippez. Et vous obtenez ça :


=> vous renommez "MODELE_PLAYLIST_JPLAYER" par le titre de votre playlist (évitez les espace et les caractères spéciaux, ça peut faire foirer une url)
=> Vous mettez vos fichiers sons OGG et MP3 dans sounds.
=> Vous écrivez votre playlist dans le fichier playlist.inc, en respectant la syntaxe, merci.
=> Vous remplacez le fichier "cover.jpg" soit par rien si vous n'avez pas d'artwork associé soit par la pochette afférente (au format jpg, donc, que vous renommez en "cover.jpg")... enfin bon vous avez pigé l'idée.

2.2 Intégrer le lecteur à votre page web.

Ben là on va y aller par quatre chemins, c'est une iframe et pi c'est tout.
Par exemple si vous voulez intégrer l'album d'emme pils à votre page web, il suffit d'y mettre :

Code : Tout sélectionner

<iframe height="600" frameborder="0" width="320" scrolling="no" src="http://rapidos.ladistroy.fr/main/uploads/playlist/EMMA_PILS_6titres/index.php" border="0"></iframe>

Donc vous remplacez "http://...blabla.../EMMA_PILS_6titres/index.php" par l'url de votre fichier index.php, et ça roule.

Edit du 01/02/2014 :

2.3 Modifier la couleur de fond (autour du player)

Bon alors, le player il est comme yann levy, il arrive avec des marges (pouet), et c'est pas forcément tip-top pour être intégré avec une iframe. Du coup, deux possibilité se dessinent : soit on laisse le paramétrage au webmestre dans le fichier de style (jplayer.css) soit on se débrouille pour passer la couleur en paramètre et ainsi donner la possibilité à tout un chacun d'intégrer le player correctement à son site.
J'ai opté pour la deuxième option, ça me semble plus sympathique au niveau du partage.

Ca nous donne la possibilité de paramétrer le biniou avec deux paramètres au choix :
- colorname, qui doit contenir un nom de couleur.
Couleurs dispo ici par exemple : http://stylescss.free.fr/couleurs.php
- colornum : la couleur au format hexa, sur 3 ou 6 caractère (ne pas mettre le #, ça fait planter l'URL).

Dans l'iframe vous ajoutez le paramètre à l'url :

Code : Tout sélectionner

<iframe height="600" frameborder="0" width="320" scrolling="no" src="http://rapidos.ladistroy.fr/main/uploads/playlist/EMMA_PILS_6titres/index.php?colorname=lightgreen" border="0"></iframe>

ou

Code : Tout sélectionner

<iframe height="600" frameborder="0" width="320" scrolling="no" src="http://rapidos.ladistroy.fr/main/uploads/playlist/EMMA_PILS_6titres/index.php?colornum=C6D6E6" border="0"></iframe>

Voili voilou

Si vous testez le biniou, n'hésitez pas à remonter des trucs (remarques, bugs...).

[Asso-NO]

Yo!
Cool ce topic
Moi j'ai galéré pas mal avant de trouver, pour notre site, un lecteur simple, éfficace et surtout qui ne nécéssitait pas de grandes connaissances pour la mise en ligne.
J'ai finalement opté pour: http://flash-mp3-player.net
Je crois que c'est un des seuls gratuits qui ne demandait aucune manip' de téléchagement et d'installation, etc...
Et il y a un générateur de code sur leur site, après, une fois qu'on en a un, on peut directement en refaire en code...

Et le résultat est pas si dégeu, (à part certain bugs d'affichage, mais ca dépend de l'écran utilisé....)
www.asso-no.com

[abFab]

J'ai finalement opté pour: http://flash-mp3-player.net

Le problème de ce flash-player... c'est qu'il est en flash

En fait l'idée ci-dessus c'était de décrire l'utilisation d'un player qui n'utilise pas Flash(c). C'est pas évident, et le player que tu mentionnes c'est celui qu'on utilise sur le punxrezo par exemple (ex : http://punxrezo.net/Svahn ). Sur la page d'accueil c'est le XSPF player (et là visiblement il a un problème, oups)... Mais tout ça, c'est le couple infernal Flash/mp3 : propriétaire mais omniprésent. Du coup si tu veux mettre ta zique en ogg (format libre), tu peux, mais seulement en téléchargement, pas sous forme d'un lecteur en ligne.
Or avec l'apparition du HTML5 (cad des versions récentes de navigateurs, firefox, safari, opera, explorer...) on peut le faire. Mais comme toujours le problème des standards continue à faire chier, et le ogg n'est pas compatible avec tous les navigateurs, donc il faut aussi faire du mp3 pour assurer d'être lu par tout le monde (et ça la balise <audio> le gère bien : tu mets tes deux fichiers mais elle n'affiche qu'un lecteur et lit le premier fichier compatible avec le navigateur) (donc c'est cool).

Sur des sites comme le punxrezo c'est compliqué de demander aux utilisateurs d'uploader deux fichiers sons (ogg et mp3) par titre... donc pour l'instant on reste avec flash/mp3.
Par contre pour un site perso, ou un blog, là c'est bon, c'est pas la mer à boire de mettre des fichiers dans les deux formats... on peut donc envisager de se passer d'un lecteur flash.
D'où le "tuto" ci-dessus

[Asso-NO]

ok désolé, j'avais pas tout capté.

c'est cool toutes ces infos, intéressant.
je vais commencer à mettre mon nez là-dedans je pense...

cimer

[kaosyouki]

Je viens d'essayer chez moi en local, pour l'instant c'est pas vraiment concluant :



Il me demande ce que je veux faire u fichier index.php et affiche un cadre vide (et encore, parce que j'ai mis frameborder à 1).

[abFab]

Il me demande ce que je veux faire u fichier index.php et affiche un cadre vide (et encore, parce que j'ai mis frameborder à 1).

hmm... un navigateur qui demande ce qu'il doit faire d'un fichier php, c'est chelou... t'es sûr d'avoir installé php en local ?
Ca donne quoi le lien direct vers l'index.php ?

[kaosyouki]

Il me demande ce que je veux faire u fichier index.php et affiche un cadre vide (et encore, parce que j'ai mis frameborder à 1).

hmm... un navigateur qui demande ce qu'il doit faire d'un fichier php, c'est chelou... t'es sûr d'avoir installé php en local ?
Ca donne quoi le lien direct vers l'index.php ?

J'ai installé le paquet php5. Le lien direct vers index.php ? Ben il me demande si je veux l'enregistrer ou pas, donc si je dis oui il l'enregistre. Sinon avec quoi je veux l'ouvrir, donc avec gedit par exemple, ben il m'affiche le code dans gedit...

[abFab]

J'ai installé le paquet php5. Le lien direct vers index.php ? Ben il me demande si je veux l'enregistrer ou pas, donc si je dis oui il l'enregistre. Sinon avec quoi je veux l'ouvrir, donc avec gedit par exemple, ben il m'affiche le code dans gedit...

okay... supaire... c'est un bug de firefox... comme j'utilise pas firefox par défaut je l'ai jamais eu...
http://www.bleepingcomputer.com/forums/ ... php-setup/

"What you need to do is type http://localhost/phpinfo.php and then it will work fine."

Et effectivement si tu remplaces "file://var/www" par "http://localhost" alors il va interpréter les ".php" correctement...
(enfin, ton localhost à plutôt l'air d'être dans /home/DATA/www...)

[kaosyouki]

Ouais bon en fait je pense plutôt que c'est moi qui merde avec l'endroit où se trouve localhost.

Je suis en train d'uploader ça sur le serveur pour faire des tests directement en ligne plutôt qu'en local, ça devrait être plus simple et efficace.

[kaosyouki]

Bon le player et la playlist apparaissent mais y'a rien qui joue, queqlu'un(e) peut tester chez soi ?

http://kaosyouki.net/procrastination/te ... bsolu.html

C'est tout en bas.

(Edit C'est corrigé)