有多个音频，但循环中只有第一个播放

Question

我可以使用 name/artist/album/genre 或其他方式搜索歌曲，搜索符合该条件的歌曲，因此符合特定流派的歌曲都会出现。但是只有出现的第一首可以播放，如果我点击播放任何其他歌曲，第一首就会播放。

我将 mp3 文件放在一个文件夹中，将其余信息放在数据库中。

我有它，所以我可以使用艺术家和歌曲名称查找应按 mp3 文件名称播放的音频。

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 class="songimg" 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;
    }
}

Answer 1

您必须为您的标签提供唯一标识符，例如：

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

你可以将要播放的标签的索引传递给playStop函数：

onclick="playStop({ $i })

你的函数 playStop 现在接受一个数字作为参数：

function playStop(i) {

因此在函数内部您可以引用单个标签：

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

我的 php 非常生疏，所以语法可能有点不对，但原则上它应该可以。

有多个音频，但循环中只有第一个播放

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

html

javascript

php

audio