Juke box avec dewplayer

Commenter

Contenu du snippet

Dewplayer est un lecteur Flash de plus en plus utilisé sur les sites.
Mais j'ai cherché comment lui faire jouer un air qui serait différent en fonction de l'emplacement cliqué (ou survolé) sur la page WEB.

Voici comment j'ai pu réaliser ceci, en plaçant "OBJECT" dans une fonction placée dans un fichier JS.

Un fichier appelle dewplayer en indiquant l'air à jouer.
Les différents MP3 sont placés en variables dans le fichier JS.
Le player (dewplayer) ainsi que les airs MP3 sont, ici, dans la racine.
Les airs MP3 sont des chansons enfantines créées en midi puis converties en MP3.

Source / Exemple : 


Le fichier HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!-- http://www.toilefrancophone.net -->
<HTML>

<HEAD>
<TITLE>Dewplayer avec variables</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<META NAME="generator" CONTENT="Hélios 8.0">
<script language="JavaScript" src="dew.js"></script>
</HEAD>
 
<BODY bgcolor="cccccc">
<!--  POUR LA FONCTION AUDIO  -->
<div id="audio"></div>

		<!--  CADRE DE LA PAGE TOTALE   -->
<table align="center" background="granit.jpg" border=0 style="position:relative; top:-15px; left:0; margin-left: auto; margin-right: auto; text-align: left" width="1010px">
<tr>
<td>
	<!--  PRESENTATION DANS CADRE À FOND BLEU -->
<table width="70%" border="5" align="center" bgcolor="#3B64E4" cellspacing="1" cellpadding="0">
<td align="center">
	<table width="99%" border="0" bgcolor="#569BEA">
	<tr>
	<th style="font-family: arial; font-style: normal; font-size: 14pt; color: #000080">
<br /><a href="#" onClick="sons(0,880,35,160,20);" />Écouter le premier morceau.</a><br />
<br /><a href="#" onClick="sons(1,880,80,160,20);" />Écouter le deuxième morceau.</a><br />
<br /><a href="#" onClick="sons(20,0,0,0,0);" />Stopper la musique.</a><br />
<br />
	</th>
	</tr>
	</table>
</td>
</table>
  
	<!--  FIN CADRE PAGE TOTALE  -->
</td></tr></table>

</BODY>
</HTML>

Le fichier JS à placer dans le même répertoire que le fichier HTML :

		/*  SONS AVES FONCTION CONTENANT OBJECT FLASH  */

var aud = new Array();
aud[0]="ptitpapnoel.mp3";
aud[1]="vivevent.mp3";
	/*  SON 20 inexistant=silence POUR ARRÊT DU SON  */
aud[20]="rien.mp3";

	/*   LE DEWPLAYER VERSION PASSE PARTOUT PLACÉ DANS UNE FONCTION   */

function sons(n,posx,posy,larg,haut) {
document.getElementById('audio').innerHTML='<p style="position: absolute; top: ' + posy + '; left:' + posx + '; z-index:1000"><object data="dewplayer.swf?&son=' + aud[n] + '&autostart=1&autoreplay=1&showtime=1" type="application/x-shockwave-flash" width=' + larg + ' height=' + haut + '><param name="wmode" value=""><param name="allowScriptAccess" value="sameDomain"><param name="movie" value="dewplayer.swf?&son=' + aud[n] + '&autostart=1&autoreplay=1&showtime=1"><param name="bgcolor" value="#0000ff"></object></p>';
} 		

/*
Les métas mots dewplayer, dewplayerMini, dewplayerMulti acceptent plusieurs paramètres qui sont :

Le ou les MP3 (si il y a plusieurs MP3 le | sera utilisé pour délimiter les morceaux ), 
Show Time (Permet d?afficher le temps en minutes:secondes), 
Random Play (Permet la lecture aléatoire) uniquement pour le multi , 
No Pointer (Permet de ne pas afficher de curseur), 
Volume (Permet de limiter le volume du MP3). 
autostart=1 démarrage automatique (si la valeur est 0, pas la peine de le rajouter dans le code ):
autoreplay=1 lecture en boucle;
bgcolor=code couleur hexadécimal du fond 


  • /

		
//-->

Conclusion :


Ceci peut permettre la création d'un Juke Box ou une page sur laquelle un son est entendu au survol ou au clic sur une image ou un mot.
Exemple dans http://vingtscents.free.fr

Le player pourra être téléchargé sur le site http://www.alsacreations.fr/
Les airs MP3 qui seront placés dans la racine devront être indiqués dans le fichier JS

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.