11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] [Résolu] Fonction OK avec alert - HS sans alert

Bonjour,
[édit 09:10] correction VALUE des boutons.

Je suis confronté à un pb bizarre tout est dit dans le titre du sujet.
Sur Win7 et FF 89,
J'ai fait un petit lecteur audio, la fonction.js lecture_Moreau(lien,titre,temps) bloque si j'enlève un alert

La fonction :
function lecture_Moreau(lien,titre,temps) {
	var lien;
	var titre;
	var temps;
	titre = titre +" - "+ temps;
	
	pressed = !pressed;
	
	lecteurA = document.getElementById("monaudio");
	document.getElementById('TITRE').innerHTML = titre;
	var lienA="./Audio/" + lien + ".mp3";
	//alert("LIENA: "+ lienA);
	lecteurA.setAttribute('src', lienA);
	
	var words = temps.split(':');
	secondes = (parseInt(words[0]*3600)) + parseInt((words[1]*60)) + parseInt(words[2]);
	
	alert("SECONDES-="+ secondes);  // NB AVEC alert, la lecture se poursuit (après msg) à l'heure donnée et sur le bon fichier src modifié par lienA
																	// 	SI	   alert commenté ça bloque ??? !!!
	
	lecteurA.currentTime = secondes;
	lecteurA.play();
}


Je colle la totalité des codes et un lien vers des extraits de mp3,
https://www.transfernow.net/dl/20210606IauvmVNd
Pour faciliter... votre bienveillance Smiley smile ... Et merci d'avance pour vos suggestions !


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Cours J-F MOREAU</title>
  <link href="./Audio.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="./Audio.js"></script>
</head>

<body>
<div id="DIVA">
	<div>
		<h2 id="TITRE">TRE 1/6</h2>
	</div>
	<div>
		<audio id="monaudio" controls>
			<!-- <source src="./Audio/2005.10.05_spinoza_001_pfmoreau_ltre_001.mp3" type="audio/mpeg">-->
			<source src="./Audio/2005.10.05_spinoza_001_pfmoreau_ltre_001_15mn.mp3" type="audio/mpeg">
		</audio> 
	</div>
		
	<div id="CONTROLESA" hidden></div>
	<div id="VITESSEAMOINS" hidden></div>
	<div> <h3 id="VITESSE">- 1.00 -</h3></div>
	<div id="VITESSEAPLUS" hidden></div>

<ul>
	<INPUT id="BtnMoreau" TYPE="button" style="width:150px; height:25px; font-size:15px;" VALUE="TRE 1/6 - 0:05:00" onclick="lecture_Moreau('2005.10.05_spinoza_001_pfmoreau_ltre_001_15mn','TRE 1/6','0:05:00')" />
</ul>
<ul>
	<INPUT id="BtnMoreau" TYPE="button" style="width:150px; height:25px; font-size:15px;" VALUE="TRE 2/6 - 0:10:00" onclick="lecture_Moreau('2005.10.12_spinoza_002_pfmoreau_ltre_002_15mn','TRE 2/6','0:10:00')" />
</ul>

<!--
<ul>
	<INPUT id="BtnMoreau" TYPE="button" style="width:150px; height:25px; font-size:15px;" VALUE="TRE 3/6 - 0:32:00" onclick="lecture_Moreau('2005.10.12_spinoza_003_pfmoreau_ltre_003','TRE 3/6','0:32:00')" />
</ul>
<ul>
	<INPUT id="BtnMoreau" TYPE="button" style="width:150px; height:25px; font-size:15px;" VALUE="TRE 4/6 - 0:48:00" onclick="lecture_Moreau('2005.10.26_spinoza_004_pfmoreau_ltre_004','TRE 4/6','0:48:00')" />
</ul>
<ul>
	<INPUT id="BtnMoreau" TYPE="button" style="width:150px; height:25px; font-size:15px;" VALUE="TRE 5/6 - 0:48:00" onclick="lecture_Moreau('2005.11.09_spinoza_005_pfmoreau_ltre_005','TRE 5/6','0:48:00')" />
</ul>
<ul>
	<INPUT id="BtnMoreau" TYPE="button" style="width:150px; height:25px; font-size:15px;" VALUE="TRE 6/6 - 1:15:00" onclick="lecture_Moreau('2005.11.16_spinoza_006_pfmoreau_ltre_006','TRE 6/6','1:15:00')" />
</ul>
-->

<!-- LIEN AUDIO :

 https://www.transfernow.net/dl/20210606IauvmVNd
 

-->

</div>
</body>
</html>





var lecteurA;
var pressed = 1;
var vitesse = 1.00;

function creerBoutonsVideo() {
	// Créé les boutons de gestion du lecteur vidéo
	var btnStartV = document.createElement("button");
	var btnReculerV5 = document.createElement("button");
	var btnAvancerV5 = document.createElement("button");
	var btnLectureV = document.createElement("button");
	var btnReculerV10 = document.createElement("button");
	var btnAvancerV10 = document.createElement("button");

	var controlesBoxV = document.getElementById("CONTROLESV");
	lecteurV = document.getElementById("mavideo");

	// Ajoute un peu de textes
	btnStartV.textContent = "Début";
	btnReculerV5.textContent = "- 5s";
	btnAvancerV5.textContent = "+ 5s";
	btnLectureV.textContent = "Lecture/Pause";
	btnReculerV10.textContent = "- 10s";
	btnAvancerV10.textContent = "+ 10s";
    
	// On ajoute les boutons à l'interface
	controlesBoxV.appendChild(btnStartV);
	controlesBoxV.appendChild(btnReculerV5);
	controlesBoxV.appendChild(btnAvancerV5);
	controlesBoxV.appendChild(btnLectureV);
	controlesBoxV.appendChild(btnReculerV10);
	controlesBoxV.appendChild(btnAvancerV10);
    
	// On lie les fonctions aux boutons
	btnStartV.addEventListener("click", stopV, false);
	btnReculerV5.addEventListener("click", function(){reculerV(5)}, false);
	btnAvancerV5.addEventListener("click", function(){avancerV(5)}, false);
	btnLectureV.addEventListener("click", lectureV, false);
	btnReculerV10.addEventListener("click", function(){reculerV(10)}, false);
	btnAvancerV10.addEventListener("click", function(){avancerV(10)}, false);
    
	// On affiche les nouveaux boutons et supprime l'interface original
	controlesBoxV.removeAttribute("hidden");
	//lecteurV.removeAttribute("controls");
}

//****************
// FONCTIONS AUDIO

function lecture_Moreau(lien,titre,temps) {
	var lien;
	var titre;
	var temps;
	titre = titre +" - "+ temps;
	
	pressed = !pressed;
	
	lecteurA = document.getElementById("monaudio");
	document.getElementById('TITRE').innerHTML = titre;
	var lienA="./Audio/" + lien + ".mp3";
	//alert("LIENA: "+ lienA);
	lecteurA.setAttribute('src', lienA);
	
	var words = temps.split(':');
	secondes = (parseInt(words[0]*3600)) + parseInt((words[1]*60)) + parseInt(words[2]);
	
	alert("SECONDES-="+ secondes);  // NB AVEC alert, la lecture se poursuit (après msg) à l'heure donnée et sur le bon fichier src modifié par lienA
																	// 	SI	   alert commenté ça bloque ??? !!!
	
	lecteurA.currentTime = secondes;
	lecteurA.play();
}

function lectureA() {
	// Lit Audio
	// alert("PRESSED: "+ pressed);
	if (pressed == 1) {
		pressed = 0;
		lecteurA.play();
		lecteurA.playbackRate = vitesse;
	} else {
		pressed = 1;
		lecteurA.pause();
	}
}

function pauseA() {
	// Met Audio en pause
	lecteurA.pause();
}

function stopA() {
	// Arrête Audio
	// On met en pause
	lecteurA.pause();
	// Et on se remet au départ
	lecteurA.currentTime = 0;
}

function avancerA(dureeA) {
	// Avance de 'duree' secondes
	// On parse en entier pour etre sur d'avoir un nombre
	lecteurA.currentTime += parseInt(dureeA);
}

function reculerA(dureeA) {
	// Recule de 'duree' secondes
	// On parse en entier pour etre sur d'avoir un nombre
	lecteurA.currentTime -= parseInt(dureeA);
}

function creerBoutonsAudio() {
	// Créé les boutons de gestion du lecteur Audio
	var btnStartA = document.createElement("button");
	var btnReculerA5 = document.createElement("button");
	var btnAvancerA5 = document.createElement("button");
	var btnLectureA = document.createElement("button");
	var btnReculerA10 = document.createElement("button");
	var btnAvancerA10 = document.createElement("button");
	    
	var controlesBoxA = document.getElementById("CONTROLESA");
	lecteurA = document.getElementById("monaudio");
    
	// Ajoute un peu de textes
	btnStartA.textContent = "Début";
	btnReculerA5.textContent = "- 3s";
	btnAvancerA5.textContent = "+ 3s";
	btnLectureA.textContent = "Lecture/Pause";
	btnReculerA10.textContent = "- 10s";
	btnAvancerA10.textContent = "+ 10s";
    
	// On ajoute les boutons à l'interface
	controlesBoxA.appendChild(btnStartA);
	controlesBoxA.appendChild(btnReculerA5);
	controlesBoxA.appendChild(btnAvancerA5);
	controlesBoxA.appendChild(btnLectureA);
	controlesBoxA.appendChild(btnReculerA10);
	controlesBoxA.appendChild(btnAvancerA10);
    
	// On lie les fonctions aux boutons
	btnStartA.addEventListener("click", stopA, false);
	btnReculerA5.addEventListener("click", function(){reculerA(3)}, false);
	btnAvancerA5.addEventListener("click", function(){avancerA(3)}, false);
	btnLectureA.addEventListener("click", lectureA, false);
	btnReculerA10.addEventListener("click", function(){reculerA(10)}, false);
	btnAvancerA10.addEventListener("click", function(){avancerA(10)}, false);
    
	// On affiche les nouveaux boutons et supprime l'interface original
	controlesBoxA.removeAttribute("hidden");
	//lecteurV.removeAttribute("controls");
}

function creerVitesseAudio() {
	// Créé les boutons de vitesse du lecteur Audio
	var btnVitMoinsA = document.createElement("button");
	var controlesBoxA = document.getElementById("VITESSEAMOINS");
	
	var btnVitPlusA  = document.createElement("button");
	var controlesBoxA = document.getElementById("VITESSEAPLUS");
	
	lecteurA = document.getElementById("monaudio");
	
	// Ajoute un peu de textes
	btnVitMoinsA.textContent = "Moins Vite";
	btnVitPlusA.textContent = "Plus Vite";
	
	// On ajoute les boutons à l'interface
	controlesBoxA.appendChild(btnVitMoinsA);
	controlesBoxA.appendChild(btnVitPlusA);
	
	// On lie les fonctions aux boutons
	btnVitMoinsA.addEventListener("click", function(){VitMoinsA(0.05)}, false);
	btnVitPlusA.addEventListener("click", function(){VitPlusA(0.05)}, false);
	
	// On affiche les nouveaux boutons et supprime l'interface original
	controlesBoxA.removeAttribute("hidden");
	//lecteurV.removeAttribute("controls");
	
}

function VitPlusA(VitA) {
	// alert("VITESSE: "+ lecteurA.playbackRate);
	vitesse = lecteurA.playbackRate += VitA;
	vitesse = vitesse.toPrecision(3);
	lecteurA.playbackRate = vitesse;
	document.getElementById('VITESSE').innerHTML = vitesse;

}

function VitMoinsA(VitA) {
	// alert("VITESSE: "+ lecteurA.playbackRate);
	vitesse = lecteurA.playbackRate -= VitA;
	vitesse = vitesse.toPrecision(3);
	lecteurA.playbackRate = vitesse;
	document.getElementById('VITESSE').innerHTML = vitesse;
}

//******************
// FONCTION FICHIERS (pas utilisé)

function fichiers(lien,titre) {
	// MàJ des fichiers vidéo & audio lorsqu'on clique sur une image
	var lien;
	var titre;
	document.getElementById('TITRE').innerHTML = titre;
	lecteurA = document.getElementById("monaudio");
	var lienA="./Audio/" + lien + ".mp3";
	//alert("LIENA: "+ lienA);
	lecteurA.setAttribute('src', lienA);
}

//*******************************************
// Créé les boutons lorsque le DOM est chargé
document.addEventListener('DOMContentLoaded', creerBoutonsAudio, false);
document.addEventListener('DOMContentLoaded', creerVitesseAudio, false);





div#DIVA {
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

h3 {
	font-size: 16px;
	color: #333333;
	font-family: Times, serif;
	text-align: center;
	margin-bottom: 0px
}

div#CONTROLES {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

ul {
	margin: 0;
	padding: 0em 0em 0em 0em;
	list-style-type: none;
}

Modifié par dmganges (06 Jun 2021 - 18:55)
Bon ça fonctionne en ajoutant un Listener sur LES boutons BtnMoreau !
Je me demande si ce n'est pas un heureux effet de bord, dans la mesure où ils s'appellent tous id="BtnMoreau"
M'enfin Smiley ohwell , c'est tombé en marche, pour l'instant... mais j'en aurai entre 120 et 150 du même id dans la page...

Je passe le sujet en Résolu mais s'il y a plus orthodoxe je ssuis preneur !


//*******************************************
// Créé les boutons lorsque le DOM est chargé
document.addEventListener('DOMContentLoaded', creerBoutonsAudio, false);
document.addEventListener('DOMContentLoaded', creerVitesseAudio, false);
BtnMoreau.addEventListener('click', lectureA, false);
Sujet clos
Aller à