Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2009/06/21

Sonoriser ses images avec dewplayer

Le lecteur Flash Dewplayer permet d'insérer facilement un lecteur MP3 sur son Blog. La dernière version (1.9 - juillet 2008) permet de contrôler le lecteur à l'aide de commandes javascript.

La méthode de contrôle par javascript souffre d'une limitation : la page internet qui utilise le lecteur et le lecteur lui-même (dewplayer.swf) doivent être hébergés sur le même domaine Internet.

Il faut donc utiliser une autre technique pour contrôler dewplayer sur Blogger. Nous allons insérer le lecteur par une balise <object>, puis utiliser le modèle DOM (innerHTML) pour modifier dynamiquement le lecteur dewplayer.


La position du lecteur

Créons un bloc div qui recevra de façon dynamique le lecteur dewplayer :


<div id="my_dewplayer"></div>




Le code pour insérer le lecteur

Utilisons le code fourni par dewplayer, et créons une fonction Play ainsi qu'une fonction Stop (à saisir sans retour à la ligne) :


<script type="text/javascript">

function Play(s_son)
{
var s_html = "<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='1' height='1'
id='dewplayer' align='middle'><param name='allowScriptAccess' value='always' />
<param name='movie' value='URL lecteur dewplayer (dewplayer.swf)?mp3=" + s_son + "&autostart=1' />
<param name='quality' value='high' />
<param name='bgcolor' value='#ffffff' />
<param name='wmode' value='transparent' />
<embed src='URL lecteur dewplayer (dewplayer.swf)?mp3=" + s_son + "&autostart=1' wmode='transparent' quality='high' bgcolor='#ffffff' width='1' height='1' name='dewplayer' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' ></embed></object>";

document.getElementById("my_dewplayer").innerHTML = s_html;
}

function Stop()
{
document.getElementById("my_dewplayer").innerHTML = "";
}

</script>
<noscript>Activer javascript pour utiliser le lecteur Flash dewplayer</noscript>


Pour rendre le lecteur invisible, les dimensions sont de 1 x 1 pixel. Le paramètre autostart=1 est utilisé. L'URL du fichier MP3 est passé en paramètre.


L'appel d'une fonction sur l'image

Il suffit d'inclure un attribut onclick qui appelle la fonction Play, avec comme argument le fichier MP3 à jouer :


<img src="URL image"
onclick="Play('URL fichier MP3');"
title="titre" alt="alt" style="cursor: pointer;" />



Pour arrêter, il faut appeler la fonction Stop :


<img src="URL image"
onclick="Stop();"
title="titre" alt="alt" style="cursor: pointer" />




Le Résultat

Un clic sur les 2 premières images appelle la fonction Play. Un clic sur la dernière image termine la diffusion du son.





Au passage de la souris sur un Lien


<a onmouseover="Play('URL du fichier MP3');" onmouseout="Stop();" href="URL du Lien" target="_blank" title="Sonoriser un Lien">Un Lien Sonorisé</a>



Un Lien Sonorisé



Plus d'informations

Un Gadget Blogger pour insérer une image sonore

Insérer une image sonore avec un Gadget Google

Jouer un fichier *.mp3 sur son Blog

Contrôler dewplayer avec javascript

Utiliser dewplayer avec Google Sites


Rechercher sur le Blog de Prac avec Google CSE