Discussion :

[Accip]

Bonjour,
Sur un site web j'ai besoin de pouvoir mettre plusieurs morceaux de musiques sans qu'ils s'arrêtent à chaque changement ou actualisation de page. Un simple lecteur HTML 5 / JS sur chaque page ne convient donc pas.

Il serait possible de le faire en Ajax, comme Soundcloud ou Deezer mais mes connaissances ne me le permettent pas. J'ai donc pensé à mettre le lecteur de musique dans un pop-up (ou onglet) et qui serait "controlable" par toutes les pages du site. On choisirait les morceaux à jouer sur les pages du site, et le lecteur de musique (ouvert dans le pop-up) jouerait les musiques demandées.

En fait, exactement comme le fait franceinter.fr. Le lecteur de musique est en Flash mais il me semble que le reste est en JS.

Comment faire, une idée ?
Merci

[SpaceFrog]

l'iframe ne serait pas plus propre ?

[Accip]

Je pense qu'au contraire l'iframe est beaucoup plus sale. Sauf erreur de ma part. ^^

[SpaceFrog]

je confirme ... erreur de ta part ...

[Accip]

Et peux-tu expliquer pourquoi un pop-up audio est plus sale que des iframes ?

[SylvainPV]

Si on partait sur un iframe, cela impliquerait que le lecteur fasse partie du cadre parent, et que toutes les pages du site qui peuvent contrôler ce lecteur soient à l'intérieur de l'iframe. Passer tout son site à l'intérieur d'un iframe, je trouve pas ça terrible non plus. Quant à la pop-up, elle sera bloquée par défaut par la plupart des navigateurs, et personnellement en tant qu'internaute je trouve les pop-ups très désagréables à utiliser.

Le mieux serait de partir sur une navigation full-AJAX. Tes connaissances ne le permettent pas encore, mais il n'est jamais trop tard pour apprendre.

[SpaceFrog]

@Sylvain ?
Tu veux dire faire des load() ajax pour toute la navigation ?
Cela implique d'intégerer des hashtags pour le référencement etc ...

Il me semble que l'iframe reste en dehors du full ajax la meilleure solution.
juste un page mère qui comporte le lecteur et la navigation de fait dans un iframe
le discussion lère fille en sera facilitée aussi par rapport à un popup

[SylvainPV]

Oui, les Single Page Applications sont un poil complexes à maîtriser et soulèvent quelques questions en matière de SEO, qui sont en partie traitées par les frameworks du genre Ember / Angular.

Mais un iframe est loin d'être l'idéal : si la navigation se fait dans l'iframe, elle ne sera pas répercutée dans la barre d'URL du navigateur de l'utilisateur. Et sans être expert en SEO, je pense qu'il y a un risque que soient indexées les pages du site hors-iframe. On ne pourra pas assurer que le point d'entrée du visiteur se fasse via la page avec le lecteur audio et l'iframe.

[SpaceFrog]

Nous sommes d'accord que l'iframe est loin d'être l'idéal, mais selon moi il veint en seconde position après le SPA dans ce cas de figure et loin devant le popup.

[SylvainPV]

Ça se discute Maintenant qu'Accip connait les avantages et inconvénients de chaque solution, à lui de décider.

[sekaijin]

pour une navigation en iframe on peut travailler sur l'url

lorsque la page se charge elle récupère son frame parent et appelle une méthode de celle-ci qui modifie l'url avec un ancre
genre

http://host/ma/page/principale#!adre.../dans/l/iframe

du coup l'utilisateur peux garder un bookmark
reste à la page principale à contenir un js qui analyse l'url est lorsque elle se charge place dans l'iframe le contenu qui va bien.

C'est un peut cette technique qui est aussi utilisé dans les single page application
par exemple
//page principale
http://sencha.com/extjs/4.2.2/
//contenu d'un onglet
http://sencha.com/extjs/4.2.2/#!/guide/command_app_single
//ancre dans le contenu d'un onglet
http://sencha.com/extjs/4.2.2/#!/api/Ext.chart.Chart-method-getBox

A+JYT

[Accip]

Merci pour toutes vos réponses !

Alors, j'ai d'abord essayé de travailler avec un pop-up. Ça fonctionnait plutôt bien. Je pouvais contrôler le player depuis le pop-up (normal), et depuis la page mère.
Sauf que quand je changeais de page (la page mère disparaît), je ne pouvais contrôler le player plus que depuis le pop-up. Bref, grosso modo la méthode fonctionnait.

Puis j'ai essayé la méthode avec l'iframe. C'est parfait !
Avec un peu de CSS, on ne voit même pas qu'il y a des iframes. L'iframe du player est superposée à l'iframe de la navigation et se fond dans le design.
Je peux donc contrôler le player depuis n'importe qu'elle page. Je modifie l'url de l'iframe en JS pour changer les musiques. J'ai même mis en place des playlists. À première vue, on croirait que c'est de l'Ajax. :p

Bon après dans mon projet je n'ai pas besoin d'être référencé. Donc l'iframe ne conviendrait peut être pas pour un site référencé.
Voilà voilà. Merci pour tout vos conseils ! Je met en résolu.

EDIT : @sekaijin: C'est pas bête ça, je vais tenter.