Tengo un proyecto escolar y me he encontrado con un problema. Hice un sitio web que contiene una tabla simple, que se puede buscar con AJAX. Tengo imagen de la persona en una columna y audio en la segunda. Lo que quiero hacer es cuando hago clic en la imagen, reproduce audio, y lo he hecho con éxito. El problema es que solo se reproduce el primer audio, sin importar en qué imagen haga clic. Entonces, si hago clic en la imagen en la línea 5, reproducirá audio desde la línea 1 y no desde la línea 5 como debería. Haga clic para ver cómo se ve la tabla.
Esto es parte del código en php:
while($redak = mysqli_fetch_array($rezultat)) { echo "<tr>"; echo "<td>" . $redak['id'] . "</td>"; echo "<td>" . $redak['ime'] . "</td>"; echo "<td>" . $redak['prezime'] . "</td>"; echo "<td>" . $redak['adresa'] . "</td>"; echo "<td> <img onclick=\"play()\" src=\"Slike/" . $redak['slika1'] . "\"</td>"; echo "<td> <audio controls id=\"audio\" src=\"Audio/" . $redak['slika'] . "\"</td>"; echo "</tr>";Este es el código para la reproducción de audio al hacer clic en javascript:
function play() { var audio = document.getElementById("audio"); audio.play(); }Aquí hay más de un problema. Primero, nunca cierres las <img> y <audio> . El segundo problema es que está reutilizando la misma id en todas las etiquetas de audio, lo que no es válido en HTML. Los id deben ser únicos dentro de un documento.
También recomendaría no hacer eco de bloques de HTML como lo está haciendo, ya que hace que sea más difícil detectar problemas con el HTML.
Cambia tu bucle así:
<?php while($redak = mysqli_fetch_array($rezultat)) { $id = 'audio_' . $redak['id']; ?> <tr> <td><?= $redak['id'] ?></td> <td><?= $redak['ime'] ?></td> <td><?= $redak['prezime'] ?></td> <td><?= $redak['adresa'] ?></td> <td><img onclick="play('<?= $id ?>')" src="Slike/<?= $redak['slika1'] ?>" /></td> <td><audio controls id="<?= $id ?>" src="Audio/<?= $redak['slika'] ?>" /></td> </tr> <?php }Luego cambie su JS a:
function play(id) { document.getElementById(id).play(); }Su identificación parece ser constante en su bucle, por lo que todas sus etiquetas de audio actualmente tienen la misma identificación,
podrías hacer algo como:
$id = "audio"; $id .= $redak['id']; echo "<td> <img onclick=\"play($id)\" src=\"Slike/" . $redak['slika1'] . "\"</td>"; echo "<td> <audio controls id=\"$id\" src=\"Audio/" . $redak['slika'] . "\"</td>entonces su función javascript sería:
function play(id){ var audio = document.getElementById(id); audio.play(); }El problema parece ser que todas las etiquetas <audio> creadas tienen la misma identificación, es por eso que su función de play selecciona el primer archivo de audio y lo reproduce...
puede modificar tanto su <img> como <audio > dentro de la declaración while a algo como esto:
while($redak = mysqli_fetch_array($rezultat)) { // .... echo "<td> <img onclick=\"play('audio_" . $redak['id'] . "')\" src=\"Slike/" . $redak['slika1'] . "\"</td>"; echo "<td> <audio controls id=\"audio_" . $redak['id'] . "\" src=\"Audio/" . $redak['slika'] . "\"</td>"; // .... } también debe cambiar la función play() para recibir la identificación de audio
function play(audio_id) { var audio = document.getElementById(audio_id); audio.play(); }