Sonoriser ses images en lançant Dewplayer par un clic sur l' image
Le lecteur MP3 en Flash permet de lire des fichiers MP3 sur son Site ou son Blog. La dernière version (1.9 - juillet 2008) intègre des fonctions javascript qui permettent le contrôle du lecteur
Le code pour afficher le lecteur
La position du lecteur est définie par le code html :
<div id="my_dewplayer"></div>
Pour insérer le lecteur, utiliser le swfobjects fourni par Google. Inclure l'appel de la librairie dans le header de la page :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
Pour ne pas afficher le lecteur, mettre 1 pixel comme taille du lecteur. Le lecteur est identifié par dewplayer . Le script javascript est incorporé dans le lecteur Flash.
Important :
Pour des raisons de sécurité, la page qui utilise les fonctions javascript doit être placée sur le même domaine Internet que le lecteur dewplayer.swf.
Le code d'appel du lecteur :
<script type="text/javascript">
var flashvars = {mp3: "URL du fichier MP3"};
var params = {wmode: "transparent"};
var attributes = {id: "dewplayer"}; swfobject.embedSWF("URL du lecteur (dewplayer.swf)", "my_dewplayer", "1", "1", "9.0.0", false, flashvars, params, attributes);
</script>
Le code javascript
dewplayer fourni les 5 fonctions (dewnext et dewprev pour la version dewplayer-multi) : dewplay, dewpause, dewstop, dewnext, dewprev
<script type="text/javascript">
function play() {
var s_o = document.getElementById("dewplayer");
if(s_o!=null) s_o.dewplay();
}
function stop() {
var s_o = document.getElementById("dewplayer");
if(s_o!=null) s_o.dewstop();
}
function pause() {
var s_o = document.getElementById("dewplayer");
if(s_o!=null) s_o.dewpause();
}
function next() {
var s_o = document.getElementById("dewplayer");
if(s_o!=null) s_o.dewnext();
}
function prev() {
var s_o = document.getElementById("dewplayer");
if(s_o!=null) s_o.dewprev();
}
</script>
L'appel d'une fonction sur l'image
Il suffit d'inclure un attribut onclick :
<img src="URL image" onclick="play();" title="titre" alt="alt" style="cursor: pointer;">
Le résultat
La première image démarre le son, la deuxième fait une pause, la troisième l'arrête.
