Archive pour 16 février 2005

Player Flash MP3 léger comme une plume

mercredi 16 février 2005 | Webdesign

Flash!

Edit : Mise jour et dernière version par ici

Macromedia Flash offre la possibilité de lire des sons à la demande. Dans certains cas, il peut être utile d'intégrer à des pages web des animations permettant de prévisualiser (préauditer plutôt) un son au format mp3. Bon nombre de ces animations disposent d'interfaces peu attrayantes ou bien trop lourdes. N'ayant pas vraiment trouvé de player simple d'utilisation et surtout léger, il ne me restait plus qu'à coder le ... dewplayer (Tadam! Pas d'objection, j'aurais pu le nommer dewflashmp3lightplayer, mais je suis ouvert à toute suggestion de nom). Il n'a rien de sorcier, de complexe ou de mystérieux. Son principal avantage, outre sa légèreté, réside en sa capacité à télécharger le contenu du son à la demande et non au moment du chargement de la page, car le fichier audio n'est pas contenu dans l'animation mais appelé dynamiquement lorsque l'on clique sur play. Exemple en action :

Extrait de 20 secondes : Le Hussard sur le Toit - Jean-Claude Petit

Son utilisation est simple car il suffit d'utiliser le code HTML classique pour une animation flash, en spécifiant dans l'url le nom du fichier comme un argument (typiquement ?son=...). Cela permet aussi de générer des listes de fichiers audio sur un serveur, par exemple dans une page web via un script PHP, et de proposer des aperçus en utilisant le même code et le même fichier swf. Ici un exemple avec votre_son.mp3 en supposant qu'il se trouve dans le même répertoire (sinon le chemin relatif passe aussi mais évitez d'utiliser des espaces ou caractères accentués). :

<object type="application/x-shockwave-flash" data="dewplayer.swf?son=votre_son.mp3" width="200" height="20"> <param name="movie" value="dewplayer.swf?son=votre_son.mp3" /> </object>

Autoplay : Il est possible de lancer automatiquement la lecture avec l'option autoplay (ou autostart ça va aussi) et la valeur 1, true ou yes. Exemple : "dewplayer.swf?son=test.mp3&autoplay=1"

Couleur de fond : Vous pouvez modifier la couleur de fond pour l'adaper à votre site grâce à deux petits bouts de code :
- rajoutez bgcolor="#xxxxxx" dans le tag object
- <param name="bgcolor" value="#xxxxxx"> avec les autres paramètres
Vous devriez obtenir ainsi (#xxxxxx est à remplacer par la couleur de votre choix, par exemple #003366 pour du bleu) :

<object type="application/x-shockwave-flash" data="dewplayer.swf?son=votre_son.mp3" width="200" height="20" bgcolor="#xxxxxx"> <param name="movie" value="dewplayer.swf?son=votre_son.mp3" /> <param name="bgcolor" value="#xxxxxx"> </object>

NB : J'ai reçu des dizaines de mails avec des suggestions et des questions, mais je n'ai pas encore pu répondre à tous ni faire les modifications souhaitées. Merci de ne pas demander le .fla :)

Edit : Mise jour et dernière version par ici