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.

Plus d'informations

Contrôler dewplayer avec javascript

Utiliser dewplayer avec Google Sites