11521 sujets

JavaScript, DOM et API Web HTML5

Karaoké

Bonjour,
Je débute en javascript et souhaiterais mettre en place sur mon site un karaoké qui s'activerait lorsqu'on joue le document audio présent sur la page. Un tableau contient les paroles, la traduction et le timing.
Au moment voulu, la ligne contenant les paroles en cours change de couleur de fond et se met en gras.
Malheureusement, le script que j'ai créé ne s'exécute pas... Quelqu'un peut-il m'aider svp?
Merci d'avance

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			var arrayLignes = document.getElementById("paroles").rows;
			var longueur = arrayLignes.length;
			var i; //n° de la ligne
			var k; //n° de la ligne suivante
				
			function timing() {
				arrayLignes[i].style.backgroundColor = "#b4b4b4";
				arrayLignes[i].style.fontWeight="bold";
			}
			
			function karaoke() {
				var i=0;
				var k=0;
				while(i<longueur)
				{
				i++;
				k = i + 1;
				//quand les paroles de la ligne commencent
				var minutes = parsInt(arrayLignes[i].cells[1].innerHTML) * 60000;
				var secondes = parsInt(arrayLignes[i].cells[2].innerHTML) * 1000;
				var centiemes = parsInt(arrayLignes[i].cells[3].innerHTML) * 10;
				var time = minutes + secondes + centiemes; 
				 // quand les paroles de la ligne suivante commencent
				var minutessuiv=parsInt(arrayLignes[k].cells[1].innerHTML)*60000;
				var secondessuiv=parsInt(arrayLignes[k].cells[2].innerHTML)*1000;
				var centiemessuiv=parsInt(arrayLignes[k].cells[3].innerHTML)*10;
				var timesuiv = minutessuiv + secondessuiv + centiemessuiv;
					
				function timing(), time;
				setTimeout('timing()', timesuiv);
			}
		</script>
	</head>
	<body>
		<audio src="08 - Aurora.mp3" controls played onplay="karakoke();"></audio> </br>
		<table id="paroles">
			<tr>
				<td>00</td>
				<td>23</td>
				<td>36</td>
				<td>Paroles 1 </td>
				<td>Traduction 1 </td>
			</tr>
			<tr>
				<td>00</td>
				<td>24</td>
				<td>97</td>
				<td>Paroles 2 </td>
				<td>Traduction 2 </td>
			</tr>
			<tr>
				<td>00</td>
				<td>25</td>
				<td>36</td>
				<td>Paroles 3 </td>
				<td>Traduction 3 </td>
			</tr>
		</table>
	</body>
</html>

[/i][/i][/i][/i][/i]
Modifié par Zephyra (24 Jan 2015 - 14:31)
Bonjour,
voila un petit exemple fonctionnel pour ton projet, si tu as des questions n'hésite pas.

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
      
			var arrayLignes;
			var longueur;
			var i=0; //n° de la ligne
      var nextTime=0;
      function init()
      {
        arrayLignes = document.getElementById("paroles").rows;
        longueur = arrayLignes.length;
        nextTime = arrayLignes.item(i).cells[0].innerHTML*1;
      }
      
			function timing() {
        if(i==longueur)
        {
          return;
        }
				arrayLignes.item(i).style.backgroundColor = "#b4b4b4";
				arrayLignes.item(i++).style.fontWeight="bold";
        nextTime = arrayLignes.item(i%longueur).cells[0].innerHTML*1;
			}
      function update(currentTime)
      {
        if(currentTime>=nextTime)
        {
          timing();
        }
      }
		</script>
	</head>
	<body onload="init()">
		<audio src="september.mp3" controls played ontimeupdate="update(this.currentTime)"></audio> </br>
		<table id="paroles">
			<tr>
        <td id="timing" style="visibility:hidden">5</td>
				<td>Paroles 1 </td>
				<td>Traduction 1 </td>
			</tr>
			<tr>
        <td id="timing" style="visibility:hidden">10</td>
				<td>Paroles 2 </td>
				<td>Traduction 2 </td>
			</tr>
			<tr>
        <td id="timing" style="visibility:hidden">15</td>
				<td>Paroles 3 </td>
				<td>Traduction 3 </td>
			</tr>
		</table>
	</body>
</html>
Sujet clos
Aller à