Magazine Blog

Sonoriser ses images avec dewplayer

Publié le 21 juin 2009 par Philippe Chappuis @prac53
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 appel 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 appel la fonction Play. Un clic sur la dernière image termine la diffusion du son.

Sonoriser ses images avec dewplayerSonoriser ses images avec dewplayerSonoriser ses images avec dewplayer

Plus d'informations
Contrôler dewplayer avec javascript
Utiliser dewplayer avec Google Sites
Activez javascript pour utiliser dewplayer


 Sonoriser ses images avec dewplayer  Les Liens du Vin  Sonoriser ses images avec dewplayer


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • Crêpes aux crevettes ww

    Les crêpes aux crevettes sont une délicieuse recette qui associe le goût de la crevette à celui de la béchamel. La préparation de crêpes à 1 SP est assez simple... Lire la suite

    Il y a 9 heures, 27 minutes par   Sabine91
    CUISINE, RECETTES
  • La nouvelle bande annonce de 22 Miles, le film de Peter Berg

    nouvelle bande annonce Miles, film Peter Berg

    22 Miles est un film réalisé par Peter Berg avec Mark Wahlberg, Lauren Cohan, Iko Uwais , Ronda Rousey, John Malkovich, Lee Chae-Rin, Terry Kinney, Sala Baker,... Lire la suite

    Il y a 10 heures, 5 minutes par   Framboise32
    CULTURE
  • Salade fruits et légumes

    Salade fruits légumes

    Surprenante association mais cette salade de fruits et légumes mélangés à des crevettes rapidement sautées est fraîche, légère et goûteuse ; cette recette est... Lire la suite

    Il y a 10 heures, 14 minutes par   Douxmets
    CUISINE
  • Cuvée rosé Légende Château de Pampelonne

    La Cuvée Légende est un vin issu d’une sélection parcellaire rigoureuse du vignoble du Château de Pampelonne. Un rosé d’exception, soyeux, frais et complexe... Lire la suite

    Il y a 11 heures, 3 minutes par   Pascal Iakovou
    CONSO, MODE, MODE FEMME
  • MLP #RN refoulée du #WebSummit :)

    refoulée #WebSummit

    je ne peux que saluer la décision de Paddy Cosgrave,  le fondateur du Web Summit qui aura lieu en novembre à Lisbonne. … …Toutefois,  je me demande surtout... Lire la suite

    Il y a 11 heures, 47 minutes par   Gédécé
    FRANCE, HUMEUR, POLITIQUE, SOCIÉTÉ
  • Impressionante exposition Subodh Gupta à la Monnaie de Paris

    Impressionante exposition Subodh Gupta Monnaie Paris

    Je vous avais déjà parlé du très beau musée de la Monnaie de Paris dans cet article. J’y suis retournée pour découvrir l’exposition « Adda /... Lire la suite

    Il y a 12 heures, 1 minute par   The Cosmic Sam
    CULTURE
  • 20+ choses étonnamment plus grandes que vous ne le pensiez

    La partie la plus importante, soit la chose qui vous fait vraiment dire « wow », c’est l’échelle. Vous ne pouvez pas vraiment apprécier la taille de quelque... Lire la suite

    Il y a 12 heures, 33 minutes par   Loopkinn
    CONSO, DÉCORATION

A propos de l’auteur


Philippe Chappuis 96 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte

Dossiers Paperblog

Magazines