Play button plays another audio

Question

I call a table posts, and in it is a column post_aud where a text with the audio/music name is 'inserted' (which is 'saved' in the Audios folder)...

$get_posts = "SELECT * FROM posts ORDER by 1 DESC";
$run_posts = mysqli_query($db,$get_posts);
while ($row_posts=mysqli_fetch_array($run_posts)){
$post_aud = $row_posts['post_aud'];

<div name='barra'>
  <i id='play' onclick='play();'></i>
  <i id='pause' onclick='pause();'></i>
<audio id='song' >
   <source src='../audios/$post_aud' type='audio/ogg'>
   <source src='../audios/$post_aud' type='audio/mpeg'>
</audio>

//javascript

function play() {
  document.getElementById('song').play();
}

function pause() {
  document.getElementById('song').pause()
}

//javascript close

</div> //fecha barra
} //fecha while

That is, each post has its own post_aud/music, however, the problem is that every time I press play (in any post) it plays only the audio of the last post inserted (so much so that if I use the normal html player, it works well). Any idea what it might be??? Grateful!!!

Answer 1

It’s creating several elements with the same id and creating several unnecessary scripts on loop. The correct thing would be to create a count $conta which would be a way to identify each element:

<?php

$get_posts = "SELECT * FROM posts ORDER by 1 DESC";
$run_posts = mysqli_query($db,$get_posts);
$conta = 0;
while ($row_posts=mysqli_fetch_array($run_posts)){
   $post_aud = $row_posts['post_aud'];
?>
<div name='barra<?=$conta?>'>
  <i onclick='play('<?=$conta?>');'></i>
  <i onclick='pause('<?=$conta?>');'></i>

   <audio id='song<?=$conta?>' >
      <source src='../audios/<?=$post_aud?>' type='audio/ogg'>
      <source src='../audios/<?=$post_aud?>' type='audio/mpeg'>
   </audio>
</div>
<?php
   $conta++;
} //fecha while
?>

<script>
function play(id) {
  document.getElementById('song'+id).play();
}

function pause(id) {
  document.getElementById('song'+id).pause()
}
</script>