Sujet Précédent Sujet Suivant

Quizz musicale 2.0

Fermé
stuprmaatie - Modifié le 3 juil. 2019 à 14:13
jordane45 Messages postés 38279 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 novembre 2024 - 4 juil. 2019 à 10:39
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
A voir également:

6 réponses

Réponse 1 / 6
jordane45 Messages postés 38279 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 novembre 2024 4 697
3 juil. 2019 à 15:01
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;
}

1
Réponse 2 / 6
stuprmaatie
3 juil. 2019 à 15:53
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.
0
jordane45 Messages postés 38279 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 novembre 2024 4 697
3 juil. 2019 à 16:40
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 )
0
Réponse 3 / 6
stuprmaatie
3 juil. 2019 à 16:46
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>
0
jordane45 Messages postés 38279 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 novembre 2024 4 697
3 juil. 2019 à 17:10
Je n'arrive pas à reproduire le chevauchement des sons....
As tu vidé le cache de ton navigateur après avoir modifié le javascript ??
0
Réponse 4 / 6
stuprmaatie
4 juil. 2019 à 08:07
oui le cache est vidé... c'est fou que le audio.pause() ne fonctionne pas, il est complètement ignoré
0
jordane45 Messages postés 38279 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 novembre 2024 4 697
4 juil. 2019 à 09:32
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...
0

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

Posez votre question
Réponse 5 / 6
stuprmaatie
4 juil. 2019 à 10:08
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
0
jordane45 Messages postés 38279 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 novembre 2024 4 697
4 juil. 2019 à 10:13
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...
0
Réponse 6 / 6
stuprmaatie
4 juil. 2019 à 10:18
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>
0
jordane45 Messages postés 38279 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 novembre 2024 4 697
4 juil. 2019 à 10:39
ç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....
0

Discussions similaires

[DVD] différence entre une piste 2.0 et 5.1 ?
ROSE -
Lepitinicolas -

2 réponses