I have a school project and I've run into a issue. I made a website that contains simple table, searchable with AJAX. I have image of the person in one column and audio in the second one. What I want to do is when I click on the image it plays audio, and I've successfully done that. The issue is that it's only playing first audio, no matter what picture I click on. So if I click on image in line 5, it will play audio from line 1, and not from line 5 as it should. Click to see how the table looks.
This is part of the code in 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>";
This is code for audio play onclick in javascript:
function play() {
var audio = document.getElementById("audio");
audio.play();
}
There's more than one issue here. First, you never close the <img> and <audio> tags. The second issue is that you're reusing the same id on all the audio tags, which is invalid in HTML. id's must be unique within a document.
I would also recommend not echoing blocks of HTML like you're doing since it makes it harder to spot issues with the HTML.
Change your loop like this:
<?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
}
Then change your JS to:
function play(id) {
document.getElementById(id).play();
}
Your id seems to be constant in your loop, so all your audio tags currently have the same id,
you could do something like:
$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>
then your javascript function would be:
function play(id){
var audio = document.getElementById(id);
audio.play();
}
The issue seems to be that all created <audio> tags have the same id, that's why your play function selects the first audio file and play it...
you can modify both of your <img> and <audio> tag inside while statement to something like this:
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>";
// ....
}
also you have to change play() function to receive the audio id
function play(audio_id) {
var audio = document.getElementById(audio_id);
audio.play();
}