Play audio onclick (when I click on an image)-CodePudding

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();
  }

CodePudding user response：

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();
}

CodePudding user response：

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();
}

CodePudding user response：

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();
}