11548 sujets

JavaScript, DOM et API Web HTML5

Lancer la lecture d'un mp3 en cliquant sur le titre...

Bonjour, Je cherche à mentionner sur une page web tous les titres d'un cd, mais seulement 4 cliquables pour la lecture audio. Je ne veux pas que ces titres soient incorporés dans la playlist d'un player, simplement pouvoir écouter les 4 premiers en cliquant dessus. Et je trouve des centaines de players avec playlist mais rien qui correspond à ma recherche!
Vous avez sans doute une solution
Merci
Bonsoir,

Le dewplayer devrait faire l'affaire, non?
Tu décides toi-même des titres sur lesquels tu veux l'appliquer.
Voici peut-être une piste de réflexion (il faut télécharger le fichier "dewplayer.swf" au préalable !!) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Ecoute de certains CDs</title>
    <script type="text/javascript">
	//<![CDATA[
	function jouer(son) {
		var content = '<object type="application/x-shockwave-flash" data="dewplayer.swf?autostart=1&son='+son+'" width="0" height="0"><param name="movie" value="dewplayer.swf?autostart=1&son='+son+'" /><\/object>';
		document.getElementById('player').innerHTML = content;
	}
    //]]>
    </script>
	<style type="text/css">
		#listing ul li a {text-decoration:none;}
	</style>
  </head>
  <body>
<div id="listing">
	<ul>
		<li><a href="javascript:jouer('hymne.mp3');">L'Hymne A La Joie</a></li>
		<li><a href="javascript:;">Les 4 Saisons</a></li>
		<li><a href="javascript:;">Lettre A Elise</a></li>
		<li><a href="javascript:jouer('dies.mp3');">Dies Irae</a></li>
		<li><a href="javascript:;">Alors On Danse</a></li>
		<li><a href="javascript:;">Satisfaction</a></li>
	</ul>
</div>
<div id="player">&nbsp;</div><!-- pour le "dewplayer" -->
</body>
</html>

N.B.: tes fichiers son doivent être au format mp3.

Cordialement
Modifié par lddsoft (09 Oct 2011 - 20:26)
Bonjour ça ne fonctionne pas, il fallait bien incorporer le dewplayer dans la page??? Voici mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Ecoute de certains CDs</title>

    <script type="text/javascript">

	//<![CDATA[

	function jouer(son) {

		var content = '<object type="application/x-shockwave-flash" data="dewplayer.swf?autostart=1&son='+son+'" width="200" height="20"><param name="movie" value="dewplayer.swf?autostart=1&son='+son+'" /><\/object>';

		document.getElementById('player').innerHTML = content;

	}

    //]]>

    </script>

	<style type="text/css">

		#listing ul li a {text-decoration:none;}

	</style>

  </head>

  <body>

<div id="listing">

	<ul>

		<li><a href="javascript:jouer('hymne.mp3');">L'Hymne A La Joie</a></li>

		<li><a href="javascript:;">Les 4 Saisons</a></li>

		<li><a href="javascript:;">Lettre A Elise</a></li>

		<li><a href="javascript:jouer('dies.mp3');">Dies Irae</a></li>

		<li><a href="javascript:;">Alors On Danse</a></li>

		<li><a href="javascript:;">Satisfaction</a></li>

	</ul>

</div>

<div id="player"><object type="application/x-shockwave-flash" data="dewplayer.swf?mp3" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer.swf?mp3" /></object></div><!-- pour le "dewplayer" -->

</body>

</html>

Merci
Non, tu n'y es pas!
Il ne faut rien changer à la ligne :
<div id="player">&nbsp;</div><!-- pour le "dewplayer" -->

Il faut que tu télécharges le fichier "dewplayer.swf" et que tu le places sur ton site !
Voici l'adresse : http://www.alsacreations.fr/dewplayer.html

Ceci dit, tu ne vas rien entendre car les fichiers mp3 que j'ai cités, sont 'bidons'.
A+
Modifié par lddsoft (10 Oct 2011 - 20:03)
Désolé, mais pas de musique. J'ai remplacé tes fichiers audios par les miens, qui sont à la source de mon dossier ainsi que le dewplayer.swf!! Smiley fache
Et rien Voici le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Ecoute de certains CDs</title>

    <script type="text/javascript">

	//<![CDATA[

	function jouer(son) {

		var content = '<object type="application/x-shockwave-flash" data="dewplayer.swf?autostart=1&son='+son+'" width="0" height="0"><param name="movie" value="dewplayer.swf?autostart=1&son='+son+'" /><\/object>';

		document.getElementById('player').innerHTML = content;

	}

    //]]>

    </script>

	<style type="text/css">

		#listing ul li a {text-decoration:none;}

	</style>

  </head>

  <body>

<div id="listing">

	<ul>

		<li><a href="javascript:jouer('test1.mp3');">L'Hymne A La Joie</a></li>

		<li><a href="javascript:jouer('test2.mp3');">Les 4 Saisons</a></li>

		<li><a href="javascript:jouer('test2.mp3');">Dies Irae</a></li>
        <li><a href="javascript:;">Lettre A Elise</a></li>

		<li><a href="javascript:;">Alors On Danse</a></li>

		<li><a href="javascript:;">Satisfaction</a></li>

	</ul>

</div>

<div id="player">&nbsp;</div><!-- pour le "dewplayer" -->

</body>

</html>

Il doit mabquer quelques choses non?
Désolé également, mais je viens de revérifier et le code ci-dessus fonctionne parfaitement.
A mon avis, il doit s'agir d'une erreur de chemin chez toi. Vérifie bien ce point ...

N.B.:
- si tu veux afficher le lecteur, il suffit de donner des valeurs aux attributs width et height,
- tu peux placer le div player où tu veux
Les indications données par lddsoft sont plutôt bonnes, mais je ne m'attendais pas à voir passer ce genre de code datant du siècle dernier:
<li><a href="javascript:mafonction();">Une action</a></li>
<li><a href="javascript:;">On ne fait rien</a></li>

1. Il ne s'agit pas de liens. Donc on n'utilise pas l'élément A. Pas compliqué. Smiley smile
2. Pour la deuxième ligne, on ne souhaite aucune action. Donc pas la peine de déclarer un javascript:; qui justement ne fait rien.
3. Pour exécuter du code JavaScript il y a des attributs de gestion d'évènement, pas besoin d'utiliser le pseudo-protocole javascript: dans un href.

Le code corrigé donnerait:
<li><button type="button" onclick="mafonction();">Une action</button></li>
<li>On ne fait rien</li>

L'élément BUTTON peut parfois être un peu pénible à styler dans les navigateurs, mais rien d'insurmontable avec des styles CSS qui vont bien:
button {
  margin:0;
  padding:0;
  background:none;
  font:inherit;
  cursor:pointer;
}

On peut aussi utiliser un lien si on veut proposer comme fonctionnalité «de repli» un accès direct au fichier MP3 par exemple:
<li><a href="test1.mp3" onclick="mafonction();">Une action</a></li>
<li>On ne fait rien</li>
@fvsch : sorry pour le code préhistorique (et pas très propre) que j'ai proposé. Il est vrai que je n'ai pas été assez attentif sur ce coup-là.
Une petite question cependant, même si elle a sans doute déjà été traitée à maintes reprises:
ne pourrait-on pas mettre le onclick directement dans <li>? Cela fonctionne en tout cas sous IE8 et FF7. Y aurait-il des problèmes sous certaines autres configurations?

@mimibobo
Ce qui donne, après applications des remarques de fvsch :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Ecoute de certains CDs</title>
    <script type="text/javascript">
	//<![CDATA[
	function jouer(son) {
		var content = '<object type="application/x-shockwave-flash" data="dewplayer.swf?autostart=1&son='+son+'" width="0" height="0"><param name="movie" value="dewplayer.swf?autostart=1&son='+son+'" /><\/object>';
		document.getElementById('player').innerHTML = content;
	}
    //]]>
    </script>
	<style type="text/css">
		button {
			margin:0;
			padding:0;
			background:none;
			font:inherit;
			cursor:pointer;
			border:none;
			color:#fff;
		}
		li {
			background:#999;
			width:150px;
			color:#fff;
			padding:3px;
		}
		li:hover {background:#000}
	</style>
  </head>
  <body>
<div id="listing">
	<ul>
		<li><button type="button" onclick="jouer('test1.mp3');">L'Hymne A La Joie</button></li>
		<li><button type="button" onclick="jouer('test2.mp3');">Les 4 Saisons</button></li>
		<li><button type="button" onclick="jouer('test3.mp3');">Dies Irae</button></li>
        <li>Lettre A Elise</li>
		<li>Alors On Danse</li>
		<li>Satisfaction</li>
	</ul>
</div>
<div id="player">&nbsp;</div><!-- pour le "dewplayer" -->
</body>
</html>
Merci de tous ces renseignements. Le seul code qui déclenche la musique est celui ci 
<li><a href="test1.mp3" onclick="mafonction();">Une action</a></li>

Mais ça ouvre un lecteur sans aucune commande! dans une autre page. J'aimerai que ça lise le titre dans un unique lecteur flash visible ou non! Je cherche je cherche... et plus je ne connais pas le javascript!!
mimibobo a écrit :
Le seul code qui déclenche la musique est celui ci 
<li><a href="test1.mp3" onclick="mafonction();">Une action</a></li>



C'est qu'il y a un problème dans ton code/tes pages que nous ne pouvons pas voir. Le code que je t'ai proposé en dernier lieu fonctionne très bien! Crois-moi!
lddsoft a écrit :
Une petite question cependant, même si elle a sans doute déjà été traitée à maintes reprises:
ne pourrait-on pas mettre le onclick directement dans <li>? Cela fonctionne en tout cas sous IE8 et FF7. Y aurait-il des problèmes sous certaines autres configurations?

C'est possible et ça marche sur tous les navigateurs. Par contre, l'élément LI ne peut pas, par défaut, recevoir le focus, donc ça sera inutilisable en navigation au clavier. Et un lecteur d'écran ne listera et n'exposera pas le LI comme élément activable par l'utilisateur.

Donc je resterais sur un BUTTON (si action scriptée uniquement) ou un A (s'il y a un href pertinent renseigné). Et si on veut utiliser un autre élément (SPAN, LI, DIV...), on peut déclarer que cet élément peut recevoir le focus avec un tabindex="0" et on doublera avec un attribut role qui va bien (pour un résultat plus accessible), par exemple:
<span class="play-button" tabindex="0" role="button" data-soundfile="test.mp3">
    Une action
</span>
(et le code JS peut ajouter les gestionnaires d'évènements qui vont bien et exploiter la valeur de l'attribut de données data-soundfile pour récupérer l'URL ou le nom du fichier).

Pour info, l'exemple ci-dessus fait référence à:
- Attributs de données HTML5: http://html5doctor.com/html5-custom-data-attributes/
- Rôles ARIA: http://www.w3.org/TR/wai-aria/roles#role_definitions
mimibobo a écrit :
et plus je ne connais pas le javascript!!

Copier-coller des bouts de code (aussi bons soient-ils) et tenter de les faire fonctionner sans rien y comprendre, voire de les adapter à ses propres besoins en bidouillant toujours sans comprendre... c'est une méthodologie que je déconseille très fortement, et qui est d'ailleurs officiellement déconseillée par les règles de ce forum (règle 8).

J'ai bien peur que si tu ne comprends rien aux exemples donnés, par exemple si tu ne comprends pas que mafonction() est un nom de fonction fictif qui ne doit pas être gardé tel quel, tu ne puisses pas réussir à développer ce site ou cette page web comme tu l'entends. Dans ce cas, je te conseillerais plutôt de passer par un service web qui te propose de créer et héberger des pages, et qui ne demandera pas (et peut-être même ne permettra pas) de toucher le code. Par exemple et très au pif: bandcamp.com (mais je ne sais pas du tout si ça correspond à ton besoin).
Modifié par fvsch (11 Oct 2011 - 16:15)
Je crois avoir saisi quelques choses, au clic sur un titre dewplayer cherche une playlist absente!! Il faut trouver un dewplayer sans plylist xml? c'est ça?
mimibobo a écrit :
Je crois avoir saisi quelques choses, au clic sur un titre dewplayer cherche une playlist absente!! Il faut trouver un dewplayer sans plylist xml? c'est ça?

Si tu as pris le dewplayer version «multi», ce n'est effectivement pas le bon.
@fvsch

Je te remercie pour ta patience, ta compétence et ton sens pédagogique.
Tes commentaires apportent quelque chose à ceux à qui ils sont destinés, ils ne sont jamais discourtois ou pontifiants.
Bonjour, j'ai essayé le code de @lddsoft. Comme ça marchait pas chez moi, j'ai fait une petite modification et ça marche. Dans la fonction j'ai remplacé "&son" par "&mp3". Ça donne 
 <script type="text/javascript">

	//<![CDATA[

	function jouer(son) {

		var content = '<object type="application/x-shockwave-flash" data="dewplayer-mini.swf?autostart=1&mp3='+son+'" width="160" height="20"><param name="movie" value="dewplayer-mini.swf?autostart=1&mp3='+son+'" /><\/object>';

		document.getElementById('player').innerHTML = content;

	}

    //]]>

    </script>

Merci @lddsoft pour le code.
Modifié par wmbnio (26 Apr 2012 - 00:53)
wmbnio,

et pour être parfait ton code corrigera 2 fois l'imprécision & par &amp;

Et je ne te proposerai toutefois pas le code suivant sans bien connaître les flashvars du dewplayer-mini (autoplay ? autostart?) qui me semble plus logique :

<script type="javascript">
function PlayMusic(fichier_mp3)
{
var ecriture_html = "<object type='application/x-shockwave-flash' data='dewplayer-mini.swf?mp3=" + fichier_mp3 + "&amp;autoplay=1' height='1' width='1'><param name='movie' value='dewplayer-mini.swf?mp3=" + fichier_mp3 + "&amp;autoplay=1' /><param name='wmode' value='transparent' /></object>"; 

document.getElementById("player").innerHTML = ecriture_html;
}

</script>

Mais bon, si ton code fonctionne, alors tout va bien !
Modifié par zebulin (26 Apr 2012 - 19:18)
Sujet clos
Aller à