Quizz musicale 2.0

-
Bonjour, j'ai créer un quizz sur des bruits d'oiseaux en javascript, mais j'ai un petit soucis. quand je valide une réponse, j'aimerai que le son qui est lié à la première réponse se stop pour laisser place au son suivant. ici dans mon programme tout les sons se superpose au fûr et à mesure que l'on avance dans le quizz ! une idée ami programmeur ? j'ai essayer avec un " audio.stop()" mais ni fait... merci d'avance

Voici mes 4 Boutons réponses du Quizz/ QCM:
<div class="colonne" id="liste">
   <div class="calque_rep" id="rep1" onClick='valider(1)'></div>
   <div class="calque_rep" id="rep2" onClick='valider(2)'></div>
   <div class="calque_rep" id="rep3" onClick='valider(3)'></div>
   <div class="calque_rep" id="rep4" onClick='valider(4)'></div>
    </div>

ici ma fonction valider :
function valider(num_rep){
  if(jouer==false)
   return;

  if(num_rep != bonne_rep)
   nb_erreurs++;
   nb_questions--;
    if(nb_questions==0)
    jouer=false;
    init();
    suivant();
}

et ici mes questions qui son générée dans l'ordre avec leurs bruit d'oiseaux respectif: 

function questions(numero)
{
 var chaine=""; 
 var audio = new Audio;
 switch(numero)
 {
  //rougegorge
  case 1:
chaine="Quel est cet oiseau ? 


*pivert*rougegorge*pigeon*coco*2";
   audio.src = "chant/bruit.wav";
   audio.play();
   audio.loop = false;
  break;
  
  //merle
  case 2:
chaine="Quel est cet oiseau ?*peruche*coco*merle*chat*3";
   audio.src = "chant/bruit2.wav";
   audio.play();
   audio.loop = false;
  break;
  
  //moineau
  case 3:
chaine="Quel est cet oiseau ? 


*Moineau*coco*merle*chat*1";
   audio.src = "chant/bruit3.wav";
   audio.play();
   audio.loop = false;
  break;
   }
return chaine;
}


EDIT : Ajout des balises de code

Configuration: Windows / Chrome 75.0.3770.100
Afficher la suite 

6 réponses

Meilleure réponse
Messages postés
26552
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2019
1841
1
Merci
Bonjour,

Déjà... à l'avenir... lorsque tu postes du code sur le forum merci d'utiliser les BALISES DE CODE.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

(J'ai édité ta question pour les ajouter.... la prochaine fois je te laisserai faire ! )

Ensuite, si tu regarde le lien que je t'ai donné hier.. tu vérras qu'il existe une méthode : pause

Donc.. tu mets en pause le player
Tu changes le SRC
Tu lances la lecture (avec la méthode play )
et normalement... c'est tout bon.


Un truc du genre ..
var audio = new Audio;

function playSound(soundPath){
  audio.pause();
  audio.src = soundPath;
  audio.loop = false;
  audio.play();
}


function questions(numero)
{
 var chaine=""; 
 
 switch(numero) {
  //rougegorge
  case 1:
    chaine="Quel est cet oiseau ? *pivert*rougegorge*pigeon*coco*2";
    playSound("chant/bruit.wav");
  break; 
  //merle
  case 2:
    chaine="Quel est cet oiseau ?*peruche*coco*merle*chat*3";
    playSound("chant/bruit2.wav");
  break;
  //moineau
  case 3:
    chaine="Quel est cet oiseau ? *Moineau*coco*merle*chat*1";
    playSound("chant/bruit3.wav");
    break;
  }
  return chaine;
}

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 65159 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jordane45
0
Merci
Bonjour Jordane ! je suis vraiment désolé pour les balises, je suis nouveau ici.. je ferrais attention !
Pour ce qui est de votre solution, elle ne fonctionne pas, mes son se superpose toujours.
jordane45
Messages postés
26552
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2019
1841 -
Le problème.. c'est que tu ne nous as pas donné tout ton code...
Par exemple.. que contiennent tes fonctions
init(); et suivant();

Dans l'idéal.. il faudrait nous donner le code source généré complet ( celui que tu peux voir lorsque tu affiches ta pages dans ton navigateur et que tu en affiches la source ( CTRL + U )
Commenter la réponse de stuprmaatie
0
Merci
Que Voici !

<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Jeu Javascript - QCM</title>
<meta name="description" content="Questionnaire à choix multiples en Javascript pour passer des évaluations sur des Quizz" />
<meta name="robots" content="index,follow" />
<meta http-equiv="content-language" content="fr" />
<link href='styles/mef.css' rel='stylesheet' type='text/css' />
<script language="Javascript" src="js/questions.js"></script>
</head>
<body>

	<div class="div_conteneur_parent">
	<div id="infos" class="texte_div"></div>
		<div class="div_conteneur_page">
			</a>		
			<div class="titre_page"><h1>MHNH-Luxembourg</h1></div>
			
			<div class="div_int_page">
			
			<div style="width:100%;display:block;text-align:center;">
			</div>
			
			<div class="div_saut_ligne" style="height:30px;">
			</div>						
			
			<div style="float:left;width:10%;height:40px;"></div>
			<div style="float:left;width:80%;height:40px;text-align:center;">
			<div class="calque_titre">
			<h1>Quizz sur les oiseaux</h1>
			</div>
			</div>
					
			<div style="float:left;width:10%;height:40px;"></div>
			
			<div class="div_saut_ligne">
			</div>		
			
			<div style="width:100%;height:auto;text-align:center;">
						
			<div style="width:800px;display:inline-block;" id="conteneur">
			
			<div style="margin:auto;width:800px">
				<div id='audio_conteneur'></div>
				</div>
				<!--
				<div id="progress-bar"> 
					<div> </div>
				</div>
				-->
				<div class="centre">
					<div class="titre_centre" id="question">
					<!--	<button> <img src="images/replay.png" alt="bouton replay" value="replay" onClick='replay()'> </button> -->
					
					</div>	
				</div>
			<button> <img src="images/suivant.png" alt="bouton replay" value="suivant" onClick='suivant()'> </button>
				<div class="colonne" id="liste">
					<div class="calque_rep" id="rep1" onClick="valider(1); desactive_bouton()"> </div>
					<div class="calque_rep" id="rep2" onClick="valider(2); desactive_bouton()"> </div>
					<div class="calque_rep" id="rep3" onClick="valider(3); desactive_bouton()"> </div>
					<div class="calque_rep" id="rep4" onClick="valider(4); desactive_bouton()"> </div>
				</div>
				
				<div class="centre">
					<div class="titre_score" id="apercu" style="text-align:left;font-family:Calibri;">
					<input type="button" id='jouer' value="JOUER" style="margin-left:10px;" onClick="debuter(); desactive_jouer()" />
					<div id="stats" style="float:right;padding-right:15px;">
					<div style="float:left;">Votre score : </div>
					<div id="score" style="float:left;font-weight:bold;">0</div>
					<div style="float:left;">, Questions restantes : </div>
					<div id="restant" style="float:left;font-weight:bold;">10</div>
					</div>
					</div>	
				</div>					
				
			</div>
			
			</div>

			<div class="div_saut_ligne" style="height:50px;">
			</div>	
			
			</div>
		</div>
	
	</div>
	
</body>
<script type="text/javascript" language="javascript">

	var bonne_rep = 0; var nb_questions = 3;
	var nb_erreurs = 0; var mem_nb_alea="";
	var jouer=false;
	
	//initialiser le lancement
	function debuter()
	{
		jouer = true;
		bonne_rep = 0; nb_questions = 3;
		nb_erreurs = 0; mem_nb_alea="";
		init();
		suivant();
	}
	
	//afficher le nombre de question restante et le score
	function init()
	{
		document.getElementById('restant').innerText = nb_questions;
		document.getElementById('score').innerText = 10-nb_erreurs;	
	}
	
	//passer à la question suivante, afficher les possibilitée suivante 
	function suivant(){
		var indice; 
		var test = true;
		var numquest=1;
		
		while (test==true){
				if(numquest < nb_questions)
				numquest = numquest + 1;
					else{
						test=false;
					}
		}
		
		
		var chaine_question = questions(numquest);
         //alert(chaine_question);
		 
		var tab_question = chaine_question.split('*');
			document.getElementById('question').innerText = tab_question[0];
			
					for (indice=1; indice<=4; indice++){
						document.getElementById('rep' + indice).innerText = tab_question[indice];
					}    
		
							bonne_rep = tab_question[5]
	}
	
	function valider(num_rep){
		if(jouer==false)
			return;

		if(num_rep != bonne_rep)
			nb_erreurs++;
			nb_questions--;
				if(nb_questions==0)
				jouer=false;
				init();
}
 //empêcher de cliquer plusieurs fois sur jouer
	var w=0;
		function desactive_jouer(){
			if(w>=0){
				document.getElementById('jouer').disabled=true;
			}
			w = w+1;
	}
	//empêcher de cliquer plusieurs fois sur les réponses 
	var k=0;
		function desactive_bouton(){
			if(k >= 0){
				document.getElementById("rep1").disabled=true;
				document.getElementById("rep2").disabled=true;
				document.getElementById("rep3").disabled=true;
				document.getElementById("rep4").disabled=true;
			}
			k = k+1;
	}
	
	


    // A DEVELOPER
	
	/*function replay(){
		var place = document.getElementById('case').innert = numquest;
		audio.play();
	} */
	
	/*
	var son = document.getElementById("Rouge-Gorge");
	
	function playSon(){
		son.play();
	}
	
	var son2 = document.getElementById("Merle");
	
	function playSon2(){
		son2.play();
	}
	
	function stopSon(){
		son.stop();
	}
	*/
	
	
</script>
</html>
	
jordane45
Messages postés
26552
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2019
1841 -
Je n'arrive pas à reproduire le chevauchement des sons....
As tu vidé le cache de ton navigateur après avoir modifié le javascript ??
Commenter la réponse de stuprmaatie
0
Merci
oui le cache est vidé... c'est fou que le audio.pause() ne fonctionne pas, il est complètement ignoré
jordane45
Messages postés
26552
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2019
1841 -
Tu utilises quel navigateur ?
Tu as bien repris le code que je t'avais proposé ?

Juste pour les tests... que fais ceci ?

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="content-language" content="fr" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>TEST</title>
</head>
<body>
	<button onclick="test('');">1</button>
	<button onclick="test(2);">2</button>
	<button onclick="test(3);">3</button>
	<br>
	<button onclick="myPause();">PAUSE</button>
	<script type="text/javascript" language="javascript">
		function test(idSound){
		   playSound('chant/bruit'+idSound+'.wav');
		}

		
		
		var audio = new Audio;
		function playSound(soundPath){
		  console.log('playSound',soundPath);
		  audio.pause();
		  audio.src = soundPath;
		  audio.loop = false;
		  audio.play();
		}
		
		function myPause(){
			console.log('Mise en pause manuelle....');
			audio.pause();
		}
	</script>
</body>
</html>


Que ça soit en passant d'un son à un autre.... ou en utilisant le bouton prévu à cet effet.... le son se met bien en pause...
Commenter la réponse de stuprmaatie
0
Merci
je suis sur google chrome, mais j'ai testé sur firefox et Edge, l'erreur reste la.

oui j'ai bien modifié mon code comme vous me l'avez indiqué hier. et je vien de tester votre code et ça ne fonctionne pas
jordane45
Messages postés
26552
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2019
1841 -
Testé sous Chrome et sous FireFox... le code que je t'ai donné est totalement fonctionnel....
- Les sons ne se chevauchent pas..
-- Le bouton "pause" fonctionne également...
Commenter la réponse de stuprmaatie
0
Merci
je remet ici mon code actuelle. pour ma part ça ne fonctionne pas, j'ai surement une erreur quelque part.

<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Jeu Javascript - QCM</title>
<meta name="description" content="Questionnaire à choix multiples en Javascript pour passer des évaluations sur des Quizz" />
<meta name="robots" content="index,follow" />
<meta http-equiv="content-language" content="fr" />
<link href='styles/mef.css' rel='stylesheet' type='text/css' />
<script language="Javascript" src="js/questions.js"></script>
</head>
<body>

	<div class="div_conteneur_parent">
	<div id="infos" class="texte_div"></div>
		<div class="div_conteneur_page">
			</a>		
			<div class="titre_page"><h1>MHNH-Luxembourg</h1></div>
			
			<div class="div_int_page">
			
			<div style="width:100%;display:block;text-align:center;">
			</div>
			
			<div class="div_saut_ligne" style="height:30px;">
			</div>						
			
			<div style="float:left;width:10%;height:40px;"></div>
			<div style="float:left;width:80%;height:40px;text-align:center;">
			<div class="calque_titre">
			<h1>Quizz sur les oiseaux</h1>
			</div>
			</div>
					
			<div style="float:left;width:10%;height:40px;"></div>
			
			<div class="div_saut_ligne">
			</div>		
			
			<div style="width:100%;height:auto;text-align:center;">
						
			<div style="width:800px;display:inline-block;" id="conteneur">
			
			<div style="margin:auto;width:800px">
				<div id='audio_conteneur'></div>
				</div>
				<!--
				<div id="progress-bar"> 
					<div> </div>
				</div>
				-->
				<div class="centre">
					<div class="titre_centre" id="question">
					<!--	<button> <img src="images/replay.png" alt="bouton replay" value="replay" onClick='replay()'> </button> -->
					
					</div>	
				</div>
			<button> <img src="images/suivant.png" id="suivante" alt="bouton replay" value="SUIVANT" onClick='suivant()'> </button>
				<div class="colonne" id="liste">
					<div class="calque_rep" id="rep1" onClick="valider(1); desactive_bouton()"> </div> 
					<div class="calque_rep" id="rep2" onClick="valider(2); desactive_bouton()"> </div>
					<div class="calque_rep" id="rep3" onClick="valider(3); desactive_bouton()"> </div>
					<div class="calque_rep" id="rep4" onClick="valider(4); desactive_bouton()"> </div>
				</div>
				
				<div class="centre">
					<div class="titre_score" id="apercu" style="text-align:left;font-family:Calibri;">
					<input type="button" id='jouer' value="JOUER" style="margin-left:10px;" onClick="debuter(); desactive_jouer()" />
					<div id="stats" style="float:right;padding-right:15px;">
					<div style="float:left;">Votre score : </div>
					<div id="score" style="float:left;font-weight:bold;">0</div>
					<div style="float:left;">, Questions restantes : </div>
					<div id="restant" style="float:left;font-weight:bold;">10</div>
					</div>
					</div>	
				</div>					
				
			</div>
			
			</div>

			<div class="div_saut_ligne" style="height:50px;">
			</div>	
			
			</div>
		</div>
	
	</div>
	
</body>
<script type="text/javascript" language="javascript">

	var bonne_rep = 0; var nb_questions = 3;
	var nb_erreurs = 0; var mem_nb_alea="";
	var jouer=false;
	
	//initialiser le lancement
	function debuter()
	{
		jouer = true;
		bonne_rep = 0; nb_questions = 3;
		nb_erreurs = 0; mem_nb_alea="";
		init();
		suivant();
	}
	
	//afficher le nombre de question restante et le score
	function init()
	{
		document.getElementById('restant').innerText = nb_questions;
		document.getElementById('score').innerText = 10-nb_erreurs;	
	}
	
	//passer à la question suivante, afficher les possibilitée suivante 
	function suivant(){
		var indice; 
		var test = true;
		var numquest=1;
						
		while (test==true){
				if(numquest < nb_questions)
				numquest = numquest + 1;
					else{
						test=false;
					}
		}
		
		
		var chaine_question = questions(numquest);
         //alert(chaine_question);
		 
		var tab_question = chaine_question.split('*');
			document.getElementById('question').innerText = tab_question[0];
			
					for (indice=1; indice<=4; indice++){
						document.getElementById('rep' + indice).innerText = tab_question[indice];
					}    
		
							bonne_rep = tab_question[5]
	}
	
	function valider(num_rep){
		if(jouer==false)
			return;

		if(num_rep != bonne_rep)
			nb_erreurs++;
			nb_questions--;
				if(nb_questions==0)
				jouer=false;
				init();
}
 //empêcher de cliquer plusieurs fois sur jouer
	var w=0;
		function desactive_jouer(){
			if(w>=0){
				document.getElementById('jouer').disabled=true;
			}
			w = w+1;
	}
	//empêcher de cliquer plusieurs fois sur les réponses 
	var k=0;
		function desactive_bouton(){
			if(k >= 0){
				document.getElementById("rep1").disabled=true;
				document.getElementById("rep2").disabled=true;
				document.getElementById("rep3").disabled=true;
				document.getElementById("rep4").disabled=true;
			}
			k = k+1;
	}

    // A DEVELOPER
	
	/*function replay(){
		var place = document.getElementById('case').innert = numquest;
		audio.play();
	} */
	
	
</script>
</html>
	
jordane45
Messages postés
26552
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 octobre 2019
1841 -
ça ne sert à rien de nous remettre ce code là.... si déjà le code de test que je t'ai donné ne fonctionne pas....
Commenter la réponse de stuprmaatie