Comment inserer de la musique dans un carousel (image slider)

angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention   -  
Ysabe_l Messages postés 12717 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonsoir,
Je veux faire un site web avec bootstrap , html5 et css.j'ai reussi enfin à faire le carousel (image slider) .je veux bien maintenant integrer de la musique pour chaque image du carousel . J'ai essayé mais malheureusement je n'arrive pas à le faire.
voici mon code source :

<! doctype html>
<html lang="fr">
<head>
<style>
.carousel-page
{
width:100%;
height:100%;
background-color:#5f666d;
color:white;
}
</style>
<title> mon page html </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="my_carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Bulles -->
<ol class="carousel-indicators">
<li data-target="#my_carousel" data-slide-to="0" class="active"></li>
<li data-target="#my_carousel" data-slide-to="1"></li>
<li data-target="#my_carousel" data-slide-to="2"></li>
<li data-target="#my_carousel" data-slide-to="3"></li>
<li data-target="#my_carousel" data-slide-to="4"></li>
<li data-target="#my_carousel" data-slide-to="5"></li>
<li data-target="#my_carousel" data-slide-to="6"></li>
<li data-target="#my_carousel" data-slide-to="7"></li>
<li data-target="#my_carousel" data-slide-to="8"></li>
<li data-target="#my_carousel" data-slide-to="9"></li>
<li data-target="#my_carousel" data-slide-to="10"></li>
<li data-target="#my_carousel" data-slide-to="11"></li>
</ol>
<!-- Slides -->
<div class="carousel-inner">
<!-- Page 0 -->
<div class="item active">
<div class="carousel-page">
<img src="les images/123.jpg" class="img-responsive" style="margin:0px auto;" /> </div>

</div>
<!-- Page 1 -->
<div class="item ">
<div class="carousel-page">
<img src="les images/10511078_841195842559103_1519797031118599169_n.jpg" class="img-responsive" style="margin:0px auto;" /> </div>
<div class="carousel-caption"> <h3>Il était un brave homme riche <br/> il épousa une veuve qui avait deux filles </h3></div>
</div>
<!-- Page 2 -->
<div class="item ">
<div class="carousel-page">
<img src="les images/10460539_841196672559020_6920501587030261155_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;" /> </div>
<div class="carousel-caption"> <h3>Mais hélas, le brave homme mourut peu après <br/> et tout changea pour la fillette </h3></div>
</div>
<!-- Page 3 -->
<div class="item">
<div class="carousel-page">
<img src="les images/images (2) - Copie.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3> après la mort de hélas, la méchante femme traite<br/> Cendrillon plus mal encore comme une bonne </h3></div>
</div>

<!-- Page 4 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10537345_841200182558669_1958041722930231222_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3> Un jour , le roi d'un château voisin veut que son fils <br/>se marier .il a invité toutes les jolies princesses </h3></div>
</div>
<!-- Page 5 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10408564_841200569225297_6042292299157114678_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3> cendrillon reste toute seule et malheureuse</h3></div>
</div>
<!-- Page 6 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10532338_841201322558555_5285318914056044872_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3> Grâce aux faits magiques de la fée , <br/>, l'élégante princesse peut aller à la fête </h3></div>
</div>
<!-- Page 7 -->
<div class="item">
<div class="carousel-page">
<img src="les images/robe-princesse-cendrillon.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3>La musique commença <br/>et le Prince l'invita à danser </h3></div>
</div>
<!-- Page 8 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10553618_841205345891486_1476414944489674851_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3> Tout à coup, Cendrillon entendit l'horloge, elle est sortie de la <br/> salle sans s'apercevoir qu'elle perdait une de ses pantoufles</h3></div>
</div>
<!-- Page 9 -->
<div class="item">
<div class="carousel-page">
<img src="les images/cendrillon_006 (1).jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3>un serviteur trouva la pantoufle perdue et l'apporta au Prince.Son <br/> père a donné l'ordre de faire essayer la pantoufle à toutes les filles</h3></div>
</div>
<!-- Page 10 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10517950_841210035891017_2017303040199092399_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3>Au hasard ,le Prince arriva à la demeure de Cendrillon <br/> et sa pied fait concorder l' une de ses pantoufles, </h3></div>
</div>
<!-- Page 11 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10450147_841214259223928_206333842716636581_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3>Le Prince la demanda en mariage <br/>et ils vécurent une longue vie de bonheur. </h3></div>
</div>

</div>
<!-- Contrôles -->
<a class="left carousel-control" href="#my_carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#my_carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>


Est ce que vous pouvez m'aider ?
merci d'avance

13 réponses

Réponse 1 / 13
mr_demonicon Messages postés 828 Date d'inscription   Statut Membre Dernière intervention   126
  
<audio autoplay  width="500" loop preload="metadata">
			<object type="application/x-shockwave-flash"
			data="index/dewplayer/dewplayer-multi.swf" width="400" height="25"
			id="dewplayer" name="dewplayer">
			<param name="wmode" value="transparent" />
			<param name="movie value="dewplayer-multi.swf" />
			<param name="flashvars" value="mp3=1.mp3|2.mp3|3.mp3&autostart=1&autoreplay=1&showtime=1&randomplay=1"/>
			</object>
			<source src="index/1.mp3"> </source>
			<source src="index/1.ogg"> </source>
			Veuillez mettre a jour votre navigateur
		</audio>
0
Réponse 2 / 13
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
Est ce qu'il ya quelq'un qui peut m'aider ?
0
Réponse 3 / 13
mr_demonicon Messages postés 828 Date d'inscription   Statut Membre Dernière intervention   126
 
oui mais tu peux mettre un son diffferent et mettre un timer ou l'eteindre des que l'on change de slider
0
Réponse 4 / 13
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
je ne sais pas comment mettre un timer ou eteindre lors du changement de slide
Est ce que tu peux me donner un tuto ou bien le code necessaire ?
svp c'est urgent
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
pouvez vous m'aider
0
Réponse 6 / 13
Utilisateur anonyme
 
Salut,

ton slider utilise jquery (il me semnle non ?)

tu peux aisément ajouté une musique pour chaque image. Le problème est que si c'est pas pour un site de musicien ou autres....ben c'est extrêmement agaçant !!!

L'idéal serait de voir comment fonctionne ton code jquery !!!

un exemple fait à l'arrache :

http://bencesticiquetudoiscliquer.bl.ee/angel_jeroumi/

bye

0
Utilisateur anonyme
 
chrome et firefox == ok les autres je sais pas :)
0
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
merci pour votre aide mais ça ne marche pas
0
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
je veux bien partir de mon code et continuer (inserer audio pour chaque image)
0
Utilisateur anonyme
 
merci pour votre aide mais ça ne marche pas

sa fonctionne pas sur ton site ? Ou c'est le lien que j'ai envoyé ? Chez moi sa fonctionne !!! Quel navigateur utilise tu ?
0
mr_demonicon Messages postés 828 Date d'inscription   Statut Membre Dernière intervention   126
 
envoie ton js et on va t'aider a le refaire avec ton audio
0
Réponse 7 / 13
Utilisateur anonyme
 
salut,

apparemment de bootstrap.js n'est pas complet....

trouve le moyen de le donner complet :)
0
mr_demonicon Messages postés 828 Date d'inscription   Statut Membre Dernière intervention   126
 
je l'ai tkt (c'est le meme que celui sur le site
0
Utilisateur anonyme
 
ok
0
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
comment faire mnt ?
0
Utilisateur anonyme
 
ben...le lien ou tu as télécharger le script, ou alors le lien de ton site...google doc...we transfert , dropbox...bref

ensuite je dis ca, je sais pas si c'est facilement modifiable. De plus, si je passe plus de 30 minutes je laisse tomber :)

a toute
0
Utilisateur anonyme
 
.

le mieux est le lien de ton site
0
Réponse 8 / 13
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
pouvez vous m'aider
0
mr_demonicon Messages postés 828 Date d'inscription   Statut Membre Dernière intervention   126
 
bon reprenons a zero tu as fait un carrousel en html qui fonctionne et tu as utilise bootstrap un script prefait (l'as tu modifier?) pour l'animer il faut donc mnt que tu rajoute un autre script pour ajouter la musique a chaque slide en autoplay il faut juste se servir de la class (tu pourrais meme le faire en html en ajoutant mon code a chaque slide differente)
0
mr_demonicon Messages postés 828 Date d'inscription   Statut Membre Dernière intervention   126
 
le jquery et le bootstrap sont des script prefait par google et twitterr
0
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
bonsoir,
j'ai mis votre code a chaque slide mais le problem est que tout les sons fonctionnent en meme temps et je veux que pour chaque slide fonctionne une seule musique
0
mr_demonicon Messages postés 828 Date d'inscription   Statut Membre Dernière intervention   126
 
dsl pour le retard mais tu m'a pas compris il faut apres que tu fasse un js qui dise que ce son doit s'arreter des que j'appuis sur precedent ou suivant apres moi j'aurais utiliser le code prefourni par lobotfix et j'aurais marque en resolu cela n'est pas tres dur 
$(function() {
	var cpt = 0;
	$('.son')[cpt].play();
	function mooveLeft() {
		$('.son')[cpt].pause();
		cpt--;
		cpt = cpt < 0 ? 3 : cpt;
		cpt = cpt > 3 ? 0 : cpt;
		$("#slide ul").animate({
			marginLeft : -960
		}, 800, function() {
			$(this).css({
				marginLeft : 0
			}).find("li:last").after($(this).find("li:first"));
		})
		$('.son')[cpt].play();
	}

	function mooveRight() {
		$('.son')[cpt].pause();
		cpt++;
		cpt = cpt < 0 ? 3 : cpt;
		cpt = cpt > 3 ? 0 : cpt;
		$("#slide ul").animate({
			marginLeft : +960
		}, 800, function() {
			$(this).css({
				marginLeft : 0
			}).find("li:first").before($(this).find("li:last"));
		})
		$('.son')[cpt].play();
	}


	$('#prev').click(mooveLeft);
	$('#next').click(mooveRight);

});
0
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
pas grave pour le retard ;)
mais ou faut il mettre ce code ?
je l'ai mis dans mon code html et c'est le meme problème
0
Réponse 9 / 13
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
sayé j'ai connecté au serveur
j'ai crée un compte, je choisi un sous domaine temporaire mais je ne sais pas comment mettre un fichier robots.txt à la racine de mon site
0
Réponse 10 / 13
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
aidez moi svp
j'ai pas bc de temps
0
Réponse 11 / 13
Utilisateur anonyme
 
Salut, pour t'aider il nous faudrait ton code complet comme je te l'ai demandé.

Ensuite ton patron est plus ou moin un con (mais il est). Le type de patron qui prends un stagiaire pour avoir une prestation gratuite et qui est exigent. Si tu connait pas javascript, tu va pas l'inventé. Ton maitre de stage devait le savoir avant de te prendre. Tu es en stage pour apprendre, si tu sait pas c'est à eux de te montrer plutôt que de te mettre la pression ainsi.

Ensuite si on avait eu ton code depuis un lien ou un téléchargement se serait peut être déjà fini.

Bonne journée

0
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
salut,
sayé j'ai connecté au serveur
j'ai crée un compte, je choisi un sous domaine temporaire
j'ai mis mon dossier dans filezella
mais je sais pas comment mettre un fichier robots.txt à la racine de mon site contenant ceci sans espace :

User-agent:*
Disallow:/
aidez moi svp
0
Ysabe_l Messages postés 12717 Date d'inscription   Statut Contributeur Dernière intervention   277
 
Bonjour,

Je ne vois pas ce qui peut te bloquer.

tu lances un éditeur de texte (le bloc notes de windows fait l'affaire).
tu mets ça dans le document

User-agent:*
Disallow:/

Juste ça.
Tu enregistres en l'appelant "robots.txt"

Tu le l'envoies à la racine du site avec filezilla.

Si tu as un soucis pour faire ça il faut nous dire à quel moment tu as un soucis.

Et comme dit lobotoFix ton patron est un idiot qui n'a rien compris au but d'un stage ! C'est à lui de t'aider et pas à toi de te débrouiller.
0
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
merci
j'ai fait tout ça mais just je sais pas comment envoyer le fichier robots.txt à la racine du site
0
mr_demonicon Messages postés 828 Date d'inscription   Statut Membre Dernière intervention   126
 
filezilla tu te connecte via tes id
0
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
oui je suis connecté au serveur à partir de filezilla
mais comment envoyer le fichier robots.txt à la racine du site
0
Réponse 12 / 13
Utilisateur anonyme
 
Salut,

alors j'ai réussi à trouver le lien de ton site...tu aurais pu le donner par toi même !

http://jeroumi.esy.es/

J'en ai donc profité pour l'aspirer afin de mieux voir.

Apparement lorsque tu as uploadé les fichiers, tu n'a pas fini.

-> fichiers css manquant
-> fichiers js manquant
-> fichiers et dossier musique inexistant
-> images corrompues

J'ai donc recherché sur internet bootstrap et je t'ai remis tes fichiers. J'ai fait un dossier musique avec des sons que j'ai sur mon ordinateur. Si tu met les sons en mp3 et ogg, tu couvrira plus de navigateurs que seulement en utilisant mp3

J'ai corrigé toutes les erreurs :

- un fichier, un dossier, un lien ne doit pas avoir d'espace dans son nom ni d'accent.

- les images doivent avoir un attribut alt

...

J'ai fait le petit code supplémentaire pour que les musiques change à chaque images. Pour que cela se lance tout seul, il faut rajouté dans la balise body un onload (tu verra je l'ai fait). Il faut bien entendu que le nombre d'images soit identique au nombre de <li> dans .carousel-indicators et aussi identique au nombre de balises audio.

Voici le résultat :

http://bencesticiquetudoiscliquer.bl.ee/angel_jeroumi/fables.html

tu peux tout télécharger ici (génial) :

http://bencesticiquetudoiscliquer.bl.ee/angel_jeroumi/jeroumi.zip

ensuite tu aura l'impression parfois que la musique ne change pas. C'est normal il n'y a que 4 musiques différentes que j'ai dupliquer.

Alors en général les stages c'est en fin d'année lorsque l'on sait faire. Toi tu ne sait pas encore faire (ou tu as rien foutu des tes études). De plus ton stage se passe dans quelle genre de boite ? Ton patron te demande de faire un site sur cendrillon et les fables?

En tout cas c'est pas grave, mais je laisse tomber.

Bonne chance



׺°"~'"°º×]|I{*------» LÖBÖTÖ «------*}I|[׺°"~'"°º×
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
@lobotofix
envoie la facture à la boite qui emploie ce stagiaire !
0
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
oui oui,j'ai connu tout ces types d'erreur en html et css
mais c'est un problème de contraint de temps....
j'ai telechargé ton code et je l'ai modifi selon mes images et mes audios
ça marche pour le bouton "next" et ne marche pas pour le bouton "precedent"
merci bien pour ton aide lobotoFix
vrement je ne trouve pas les mots pour te remercier
merci infiniment merciiiiiiii
0
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
je suis en train de faire un stage et un autre projet dans ma faculté en meme temps
C'est pourquoi je suis perturbé et je vous demande de m'aider
mais je vous promet d'apprendre javascript et bootstrap le plutot possible ;)
0
Réponse 13 / 13
angel_jeroumi Messages postés 50 Date d'inscription   Statut Membre Dernière intervention  
 
merci bien mr_demonicon, mais je veux une musique pour chaque image.le code que tu m'ai donné permet d'inserer une musique pour tout le carousel
-1

Discussions similaires

Fond d'écran carousel xiaomi
Thomasg -
Albator -

3 réponses
TokyVideo, est-ce un site fiable ? Vos avis
timinie -
Elvis -

5 réponses