begin process at 2012 02 09 19:08:29
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > JUKE BOX AVEC DEWPLAYER

JUKE BOX AVEC DEWPLAYER


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Niveau :Débutant Date de création :24/11/2008 Vu :5 427
Auteur : alain17610

Ecrire un message privé
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

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

  • 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
  • */
  • //--> 
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


 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos
Toutes les sources de la catégorie Divers

Commentaires et avis

Commentaire de proftnj le 01/12/2008 14:14:30

Ou est le fichier .js ?
Je l'ai trouvé sur votre page perso, mais il devrait être publié ici.

Commentaire de alain17610 le 01/12/2008 17:08:00

Il est bien placé ICI.

Si vous regardez bien ce qui est écrit à la ligne 45, vous verrez OÙ il est.

Le HTML va de la ligne 2 à la ligne 42.
Le JS va de la ligne 47 à la ligne 75.

C'est la première fois que j'envoie un code source sur ce site et je ne savais même pas qu'il avait été accepté.

Les 2 musiques MP3 n'ont pas été jointes mais vous pourrez insérer les vôtres en indiquant leur titre sur les lignes 50 et 51.
Le titre de la ligne 53 ne correspond à aucune musique réelle et c'est pour cela que le son s'arrête.

Commentaire de maestrodabla le 09/06/2009 22:48:57 10/10

Hi Alain,

Je te remercie pour ce merveilleux travail que tu as fait concernant l'intégration d'un lecteur audio flash dynamiquement dans une page web. Je t'invite à admirer comment ton travail a enjolivé mon site web perso pour ma section Musics. N'hesitez pas à me faire tes commentaires. L'adresse de mon site web perso :  http://maestrodabla.free.fr

Commentaire de alain17610 le 09/06/2009 23:21:21

Hello MAESTRODABLA,

I just go on your site. For videos, it's perfect, but for "music", it is not heard.
I'll see tomorrow if I see why. I do my testing with IE6.

I've just done this one : http://lemorse.free.fr which is to do better.

Bye

Commentaire de alain17610 le 09/06/2009 23:32:34

I've seen why !
Because in your js file, fuction sons() is between /* and */

/*function sons(n,posx,posy,larg,haut) { etc.

Regards.

Commentaire de proftnj le 09/06/2009 23:34:37

salut maestrodabla.

Il y a bien un problème sur ton site pour la musique avec Internet Explorer 7 et la dernière version de Firefox. Il doit y avoir une faute dans le script.
C'est OK pour les vidéos, pourtant.

Commentaire de maestrodabla le 10/06/2009 17:19:35

Hi Alain,
Ton travail pour le morse est encore admirable. Je te félicite une fois de plus. Pour tes suggestions concernant la fonction sons() que tu dis avoir vu en commentaire, ca n'a aucun effet, car je ne l'utilise pas, j'utilise une fonction createPlayer().

Hello PROTNJ,
Il n'y a pas vraiment d'erreur dans le script, ça fonctionne bien sur Firefox/3.0.10, la dernière version à date. Mais pour te dire vrai, je ne sais pas pourquoi lecteur ne veut pas apparaîttre sur IE7 ou Chrome.
Je vais regarder le script dans la journée et je reviens vers vous.
Jettez-y un coup d'oeil encore une fois, tu peux vérifier que ça marche bien sur la dernière version de Firefox.

Commentaire de maestrodabla le 10/06/2009 17:24:08

Hi PROTNJ,

Je reviens vers toi pour te dire que ça fonctionne bien sur IE7. Il faut autoriser ActiveX.
Tiens-moi au courant si tout se passe bien de ton côté.

Commentaire de alain17610 le 10/06/2009 19:39:46

Je viens d'essayer avec FireFox V 3.0.1 et c'est pareil, je n'entends pas la musique des 5 chansons.
J'ai essayé aussi avec IE7 (depuis un autre disque dur car IE7 et IE6 ne peuvent pas être sur le même) et c'est pareil.
Quant à ActiveX, pour l'autoriser, il faudrait qu'il soit proposé et il ne l'est pas.

Mais c'est avec XP pro et peut-être que tu as essayé avec Vista !
Si tu as un ami qui utilise XP, demande lui le résultat.

Le morse fonctionne bien sur IE6, IE7 et Firefox (les sons sont aussi en MP3).

Pour communiquer, tu peux aller en haut de cette page (Information sur la source) et cliquer sur "Écrire un message privé".

Regards,
A.M.

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,967 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)