Have multiple audios but only the first one in the loop plays-CodePudding

I can search for a song using it's name/artist/album/genre or something else, and songs that match that criteria, so songs matching certain genre will all appear. But only the first one that appears is playable, if I click to play any of the other songs, the first one plays.

I have the mp3 files inside a folder and the rest of the information in a database.

I have it so I can look for the audio that should be played by the name of the mp3 file, using the artist's and song name.

html/php:

for($i=0; $i<$count; $i  ){
                    $res = mysqli_fetch_array($result);
                    
                    echo('<tbody id="tbody">
                            <tr>
<audio id="audio" src="mp3/'.$res["song_artist"].'-'.$res["song_title"].'.mp3"> 
                                <td><button id="playbtn" onclick="playStop()">▷</button></td>
                                <td><img  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>
                                <td id="length"></td>
                                <script>window.onload = function() {displaylenght()}</script>
                            </tr>
                        </tbody>');
                    }

javascrit:

function playStop() {
    if (!audio) {
        document.getElementById('playControl').style.visibility = 'visible';
        var audio = document.getElementById("audio");
        var progressed = document.getElementById("progressed");
        }
    if (audio.paused) {
        console.log(audio.duration);
        audio.play();
        audio.ontimeupdate = function(e) {   
            progressed.style.width = (Math.floor((audio.currentTime*100) / getDuration()) "%");     
        }          
        audio.volume = 0.05;
        document.getElementById('playbtn').innerHTML = "❚❚";
        document.getElementById('playbtns').innerHTML = "❚❚";

    } else {
        document.getElementById('playbtn').innerHTML = "▷";
        document.getElementById('playbtns').innerHTML = "▷";
        audio.pause();
        audio.currentTime = 0;
    }
}

Any ideas?

Tyia

CodePudding user response：

You have to provide unique identifiers to your tag, something like:

<audio id="audio{{ $i }}" src="mp3/'.$res["song_artist"].'-'.$res["song_title"].'.mp3">

You can pass the index of the tag you want to play to the playStop function:

onclick="playStop({ $i })

Your function playStop now takes a number as a parameter:

function playStop(i) {

So inside the function you can reference to a single tag:

var audio = document.getElementById("audio"   i);

My php is super rusty so syntax might be a bit off, but in principle it should work.