11550 sujets

JavaScript, DOM et API Web HTML5

Audio choisi par click sur un mot

Bonjour,

Je voudrais sur une page php pouvoir démarrer un texte audio en cliquant sur un mot de la page (ou dans un layer), choisi parmi plusieurs.

Est-ce possible ? Je cherche un modèle de script.

Merci si vous pouvez m'aider.
Oui c'est possible, et même plutôt simple. En combinant PHP (ou JS) et un joli Dewplayer, tu pourras aisément parvenir à tes fins.

En gros, en PHP tu vas recevoir la musique à écouter, et tu vas avoir un paramètre géré en PHP dans le Dewplayer qui attribue la musique sélectionnée.

<?php 
// Définition de la playlist
$playlist = array('musique1.mp3', 'musique2.mp3', 'musique3.mp3');

// Récupération de la musique à écouter
$current = is_numeric($_GET['music']) ? $playslist[$_GET['music']] : $playslist[0]; 
?>

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=<?php echo $current; ?>" width="200" height="20">
<param name="movie" value="dewplayer.swf?mp3=<?php echo $current; ?>" />
</object>

<ul>
	<?php 
	// Listage des musiques
	for ($i = 0; $i < count($playlist); $i++) {
	?>
	<li><a href="?music=<?php echo $i; ?>"><?php echo $playlist[$i]; ?></li>
	<?php } ?>
</ul>

Modifié par Noix de Coco (05 Feb 2009 - 21:11)
Voici le code que j'ai essayé, ça ne marche pas.
Quelle est mon erreur ? Merci.

[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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>pageVocale21.php</title>
</head>

<body>

<?php
// Définition de la playlist
$playlist = array('essai1.mp3', 'essai2.mp3', 'essai3.mp3');

// Récupération de la musique à écouter
$current = is_numeric($_GET['essai']) ? $playslist[$_GET['essai']] : $playslist[0];
?>

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=<?php echo $current; ?>" width="200" height="20">
<param name="movie" value="dewplayer.swf?mp3=<?php echo $current; ?>" />
</object>

<ul>
<?php
// Listage des musiques
for ($i = 0; $i < count($playlist); $i++) {
?>
<li><a href="?essai=<?php echo $i; ?>"></a><?php echo $playlist[$i]; ?></li>
<?php } ?>
</ul>

</body>
</html>
IL n'y a pas besoin de flash pour faire ça... du js suffit amblement. Et je rappelle au passage que le dewplayer n'est toujours pas accessible. (quant est-ce que tu changeras ça dew ?)
Bonjour QuentinC.

Pourrais-tu corriger mon code ou me proposer un modèle de code ?

Merci d'avance.
Essaie comme ceci :
<?php
// Définition de la playlist
$playlist = array('essai1.mp3', 'essai2.mp3', 'essai3.mp3');

// Récupération de la musique à écouter
$current = is_numeric($_GET['essai']) ? $playlist[(int)$_GET['essai']] : $playlist[0];
?>

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=<?php echo $current; ?>" width="200" height="20">
<param name="movie" value="dewplayer.swf?mp3=<?php echo $current; ?>" />
</object>

<ul>
<?php
// Listage des musiques
for ($i = 0; $i < count($playlist); $i++) {
?>
<li><a href="?essai=<?php echo $i; ?>"><?php echo $playlist[$i]; ?></a></li>
<?php } ?>
</ul>


C'était juste une erreur dans le nom de la variable playlist (et de la balise lien <a> au passage).
Modifié par Noix de Coco (08 Feb 2009 - 15:40)
Merci Noix de Coco.

Ça marche très bien. tu m'as sorti d'un ennui. Merci beaucoup.

J'aimerais encore que le son démarre ausitôt que l'on clique sur une ligne de la liste, sans avoir à aller sur la barre magnéto. Que me conseilles-tu ?
Merci Noix de Coco,

Merci pour les renseignements.
Je viens d'essayer rapidement, ça ne démarre pas.
Je recommencerai demain et j'espère que ça ira bien.

Dans mon site, la page concernée renferme une biographie de mes parents, texte déroulant sur la page, avec un cadre fixe à droite où se trouvent les titres des paragraphes.
En cliquant sur un titre de ce cadre, le paragraphe appelé s'affiche bien.
Je voudrais qu'en cliquant sur un des titres qui sont dans ce cadre fixe, l'ordinateur lise le passage correspondant ( déjà enregistré dans : essai1.mp3, essai2.mp3, etc. ) et qu'il l'affiche en même temps. Le lien pour appeler le passage marche bien, mais il me faut le lier maintenant avec le démarrage du texte de chaque paragraphe. Il faut donc que 'href' appelle à la fois le paragraphe et l'audio. Une autre obligation est que ça marche avec IE et FF !
.
J'ai ajouté dans 'array' un élément vide ' ' avant 'essai1.mp3'.
L'audio ne démarre plus avec l'ouverture de la page, mais seulement par le clic sur le choix.
Ca marche avec IE, mais pas avec FF qui demande un click sur la barre magnétophone.
Pour ouvrir en même temps le paragraphe écrit, faudrait-il utiliser un tableau à deux dimensions?
Une liste textes et une liste audio dont les articles se correspondraient.
Mais je ne sais pas comment.
Tu peux passer par un tableau à deux dimensions, mais c'est franchement embêtant de devoir les écrire directement dans PHP. J'ai donc fais un affichage sous condition, qui varie en fonction de la musique sélectionnée. Personnellement c'est pas franchement utile. Si tu attribue d'autres titre à tes extraits tu n'aura plus à te soucier de cette correspondance... M'enfin si tu le demande ^^ .
Je suis de bonne humeur, voici donc le code avec le lancement automatique, la correspondance entre les titres et les numéros, et avec la gestion des paragraphes :

<?php
// Définition de la playlist
$playlist = array('essai1.mp3', 'essai2.mp3', 'essai3.mp3');

// Récupération de la musique à écouter
$num = is_numeric($_GET['essai']) ? (int)$_GET['essai'] : 1;
$current = $playlist[$num - 1];
?>

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=<?php echo $current; ?>&autoplay=1" width="200" height="20">
<param name="movie" value="dewplayer.swf?mp3=<?php echo $current; ?>&autoplay=1" />
</object>

<ul>
<?php
// Listage des musiques
for ($i = 0; $i < count($playlist); $i++) {
?>
<li><a href="?essai=<?php echo $i + 1; ?>"><?php echo $playlist[$i]; ?></a></li>
<?php } ?>
</ul>


<p>
<?php if ($num == 1) { // Si c'est la première musique ?>
Paragraphe pour la première musique.

<?php } elseif ($num == 2) { // Si c'est la deuxième musique ?>
Paragraphe pour la deuxième musique.

<?php } elseif ($num == 3) { // Si c'est la troisième musique ?>
Paragraphe pour la troisième musique.

<?php } else { // Sinon ?>
Erreur, aucun titre sélectionné.

<?php } ?>
</p>

Modifié par Noix de Coco (10 Feb 2009 - 19:52)
Sujet clos
Aller à