Lecteur audio tout en naviguant

par Dyonisos le Lun 5 Mai - 17:56

Salut à vous, je me suis décidé à m'inscrire car j'ai un problème et comme je suis débutant dans les scripts, les tutos déjà écrits me semblent fort compliqués.

Je vous explique: j'ai mis un lecteur audio (Deezer) sur mon forum, je l'ai mis sur ma page d'accueil, jusque la tout va bien puisque la musique démarre au quart de tour mais hélas elle se coupe dés que je navigue sur mon forum, c'est bien dommage car je n'entends à chaque fois que la
1 ère musique.

Voilà, si vous connaissez un moyen simple et niveau débutant, ce serait sympa de m'aider un peu la-dessus.

Merçi d'avance à vous.

par **Prof TNJ** le Mar 6 Mai - 21:05

Question très souvent posée !
C'est possible, mais un peu compliqué.
C'est faisable, même pour un "débutant", il faut être attentif, patient, faire des essais, etc.

Bon courage ! Cool

NB: Il n'y a pas de procédé plus simple, désolé Neutral

----------------------------------------------------------------------------

Pour pouvoir naviguer sur votre forum sans que la musique stoppe, il faut que le lecteur (player) mp3 se trouve dans une pop-up que le visiteur peut utiliser comme il veut.
Mais il est impossible, avec un forum de ForumActif, d'ouvrir une pop-up directement à partir de l'accueil ou du portail.

AVANT DE COMMENCER

• Votre player doit être prêt, doit fonctionner et vous devez avoir noté son code et ses dimensions sur une page de bloc-notes (en.txt);
• Votre bouton (image) doit être prêt, hébergé et son url (http://hebergeur.com/xx/xxx/bouton.jpg par exemple) ainsi que ses dimensions doivent être notés aussi sur la page de bloc-notes.

RESUME

Il faut réaliser 2 pages html :
Pour ce faire, utilisez la possibilité qui vous est offerte par ForumActif de réaliser des pages html, mais décochez l'option "conserver l'en-tête..." et collez directement les scripts fournis ci-après.

page html 1 :
http://tonforum.com/player-h1.html (par exemple, -h1 provient de ForumActif, on pourrait avoir -h3, -h6, ...)
qui contient le code de l'étape 1 et donc le script du player que vous avez choisi (Dewplayer, Deezer,...).

page html 2 :
http://tonforum.com/bouton-h2.html (par exemple, -h2 provient de ForumActif, on pourrait avoir -h4, -h7, ...)
qui contient le code de l'étape 2 et donc le script de l'image du bouton que vous avez choisi et hébergé et le script qui ouvre la pop-up (la pop-up contient la page html avec le player).

Et, pour terminer,
on colle le script de l'iframe (= un trou dans la page), c'est-à-dire le code de l'étape 3 dans un module du portail et/ou la description d'un forum.

LES TROIS ETAPES

Première étape : le lecteur mp3

Page html n° 1 qui contient le lecteur et dont le titre est "Musique" et le nom "player.htm" :

Code:: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Musique</title> </head> <body bgcolor="black" style="margin:0 px;"> <div align="center"> SCRIPT DU LECTEUR MP3 </div> </body> </html>

A la place de SCRIPT DU LECTEUR MP3, on colle le code du lecteur mp3.
On peut aussi coller le code d'un player flash de fichier video en .flv à la place du code du player mp3.

Cette page html réalisée via le panneau d'administration aura une URL comme http://tonforum.com/player-h1.html (rappel : le -h1 provient de ForumActif, c'est normal).

Deuxième étape : le bouton

Page html n° 2 qui contient le bouton et dont le titre est "bouton" et le nom "bouton.htm" :

Code:: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>bouton</title> </head> <body style="margin:0px;"> <a href="#" onClick="window.open('URL DE LA PAGE HTML POPUP','music','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=218, height=170, left=300, top=50');return(false)" target="_blank"> <img src="URL DE L'IMAGE HEBERGEE DU BOUTON" border="0"></a> </body> </html>

A la place de URL DE L'IMAGE HEBERGEE DU BOUTON, coller http://heberger/xx/xxx/bouton.jpg (bien retenir ses dimensions, on en aura besoin après).

Remplacer
URL DE LA PAGE HTML POPUP
par l'URL de ta page html 1 : http://tonforum.com/player-h1.html (rappel : le -h1 provient de ForumActif, c'est normal).

Modifier width="218" height="170" aux dimensions de VOTRE player mp3,
width = largeur, height = hauteur (en pixels).

Cette page html réalisée via le panneau d'administration aura une URL comme http://tonforum.com/bouton-h2.html (rappel : le -h2 provient de ForumActif, c'est normal).

Troisième et dernière étape : l'iframe

Script à coller sur ta page de forum où vous voulez voir le bouton qui va ouvrir la pop-up qui contient le lecteur mp3 :

Code:: <iframe src="URL DE LA PAGE HTML BOUTON" name="bouton" width="50" height="50" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

Remplacer
URL DE LA PAGE HTML BOUTON
par l'URL de votre page html 2 : http://tonforum.com/bouton-h2.html (rappel : le -h2 provient de ForumActif, c'est normal).

Modifier width="50" height="50" aux dimensions de VOTRE bouton,
width = largeur, height = hauteur (en pixels).

Cool