Tengo un bucle que forma una tabla, y cada una de las filas tiene un archivo de audio, la reproducción de audio tiene una identificación de "audio"+i para dar identificaciones únicas a los diferentes audios.
Estoy haciendo una barra de progreso, pero necesito la variable "i" para determinar en cuál de los audios debe actuar la barra de progreso, si reemplazo "i" con un número, entonces funciona. Simplemente no he encontrado una manera de obtener la variable "i".
HTML/PHP donde el bucle y el audio son:
for($i=0; $i<$count; $i++){ $res = mysqli_fetch_array($result); echo('<tbody id="tbody"> <tr> <audio id="audio'.$i.'" src="mp3/'.$res["song_artist"].'-'.$res["song_title"].'.mp3"> <td><button class="playbutton" id="playbtn'.$i.'" onclick="playStop('.$i.')">▷</button></td> <td><img class="songimg" src="getimage.php?id='.$res["song_id"].'"/> </td> <td>'.$res["song_title"].'</td> <td>'.$res["song_artist"].'</td> <td>'.$res["song_genre"].'</td> <td>'.$res["song_album_name"].'</td> </tr> </tbody>'); } }Código de barras de progreso donde necesito la variable "i":
var progressbar = document.getElementById("progress-bar"); progressbar.onclick = function(e) { var audio = document.getElementById("audio"+i); audio.currentTime = ((e.offsetX/progressbar.offsetWidth) * audio.duration); } }Gracias de antemano.
Una de las formas es utilizar un campo oculto para almacenar el valor de la "i".
Entonces, en su página, agregue el siguiente campo HTML oculto (digamos que lo configuré para que tenga un valor inicial de 0, pero puede usar otro valor inicial):
<input type=hidden id=activei value="0">Ahora, en su función playStop(i), agregue una instrucción para almacenar el valor i en el campo oculto:
function playStop(i) { document.getElementById("activei").value=i; //// other commands }Luego, cambie para usar
var progressbar = document.getElementById("progress-bar"); progressbar.onclick = function(e) { var audio = document.getElementById("audio"+document.getElementById("activei").value); audio.currentTime = ((e.offsetX/progressbar.offsetWidth) * audio.duration); } }Según su código, ya tiene una función de parada playStop() en javascript en la que le pasa el valor de i como una cadena. Desde esta configuración, puede configurar un "nivel de aplicación" global donde se almacene para i lo usen otros scripts de javascript en su código.
P.ej
app = {}; app.currentI = -1; function playStop(i) { app.currentI = parseInt(i); // the rest of code } ... var progressbar = document.getElementById("progress-bar"); progressbar.onclick = function(e) { if (app.currentI > -1) { var audio = document.getElementById("audio" + app.currentI); audio.currentTime = ((e.offsetX/progressbar.offsetWidth) * audio.duration); } } Dado que (e) será el objetivo, que necesita al hacer clic en él, app.currentI es la i del lado de PHP, también necesita saber en qué audio se hizo clic, ya que ya está codificado a través de su llamada a playStop() .
Probablemente haya una mejor manera de hacer todo esto, pero sin probarlo yo mismo, esta solución utiliza su enfoque de diseño actual y debería funcionar sin ajustes importantes.
Actualización: en lo que respecta a que no pude hacer que esto funcionara para mí, tal vez no lo entendí, pero cuando probé esto, no funcionó, intenté registrar el valor de app.currentI para ver si algo estaba mal, y obtuve "la aplicación no está definida". -- yksi
Aquí hay un ejemplo de trabajo. La propia app en este ejemplo se definiría en el ámbito global.
var app = {}; app.currentI = -1; function playStop(i) { app.currentI = i; console.log(app.currentI); } <!doctype html> <html> <head> </head> <body> <button onclick="playStop(0)" type="button">Play/Stop 0</button></br> <button onclick="playStop(1)" type="button">Play/Stop 1</button></br> <button onclick="playStop(2)" type="button">Play/Stop 2</button></br> <button onclick="playStop(3)" type="button">Play/Stop 3</button></br> <button onclick="playStop(4)" type="button">Play/Stop 4</button></br> </body> </html>Estoy mostrando solo el html renderizado para la parte de PHP, pero ese código se vería así:
<?php for ($i = 0; $i < 5; $i++) { ?> <button onclick="playStop(<?php echo $i; ?>)" type="button">Play/Stop <?php echo $i; ?></button></br> <?php } ?> De esta manera, no necesitará ninguna variable dom oculta y puede almacenar todas las cosas específicas del nivel de su aplicación en un objeto javascript, por ejemplo, app o cualquier otro nombre que especifique.