jquery-一次播放一个audioElement

我正在使用mySQL从一个表中提取所有现有的歌曲数据。除了可以同时播放多首歌曲外，一切都很正常。我试过用各种方法来做，但都没有效果，也没有任何错误

可在此处查看：

如果您查看源代码，我正在使用的代码位于页面底部

这看起来有点混乱，但下面是我的查询在呈现之前循环的代码：

echo "var audioElement".$row[0]." = document.createElement('audio');\n";
echo "audioElement".$row[0].".setAttribute('class', 'div-".$row[0]."');\n";
echo "audioElement".$row[0].".setAttribute('src', '".$row[4]."');\n";
echo "$.get();\n";
echo "audioElement".$row[0].".addEventListener('load', function() {\n";
echo "audioElement".$row[0].".play();\n";
echo "}, true);\n";
echo "$('.play".$row[0]."').click(function() {\n";
echo "if (audioElement".$row[0].".paused == false) {\n";
echo "audioElement".$row[0].".pause();\n";
echo "$('.play".$row[0]."').css('background','url(/wp-content/themes/sensation/images/play.png) 0px 8px no-repeat');\n";
echo "} else {\n";
echo "audioElement".$row[0].".play();\n";
echo "$('.play".$row[0]."').css('background','url(/wp-content/themes/sensation/images/pause.png) 0px 8px no-repeat');\n";
echo "}\n";
echo "});\n";

在启动

play

函数（

echo“audioElement”$row[0]。.play（）；\n”

）的地方，我尝试添加以下内容：

$("audio").on("play", function() {
    $("audio").not(audioElement.$row[0]).each(function(index, audio) {
        audio.pause();
    });
});

---

但那没用。是因为我在创建一个元素而不是一个真正的音频标签吗？

是的，这很混乱。不管怎样，这里有一个解决方案应该是可行的

Javascript:

playing=false;
function play(index) {
     eval('audioElement'+index+'.play();');
     $('.play'+index).css('background','url(/wp-content/themes/sensation/images/pause.png) 0px 8px no-repeat');
     playing=index;
}
function pause(index) {
     if(index==false) {
          return;
     }
     eval('audioElement'+index+'.pause();');
     $('.play'+index).css('background','url(/wp-content/themes/sensation/images/play.png) 0px 8px no-repeat');
     playing=false;
}

PHP:

var audioElement=document.createElement（'audio'）；
setAttribute（'class'，'div-'）；
setAttribute（'src'，''）；
$.get（）；
audioElement.addEventListener（'load'，function（）{
暂停（演奏）；
play（）；
}，对）；
$（'.play'）。单击（函数（）{
如果（播放==）{
暂停（）；
}否则{
暂停（演奏）；
play（）；
}
});

效果非常好！现在我只是检查一下并把它分解。

<?php
...
foreach($column as $row) {
?>
var audioElement<?=$row[0]?> = document.createElement('audio');
audioElement<?=$row[0]?>.setAttribute('class', 'div-<?=$row[0]?>');
audioElement<?=$row[0]?>.setAttribute('src', '<?=$row[4]?>');
$.get();
audioElement<?=$row[0]?>.addEventListener('load', function() {
    pause(playing);
    play(<?=$row[0]?>);
}, true);
$('.play<?=$row[0]?>').click(function() {
    if (playing==<?=$row[0]?>) {
        pause(<?=$row[0]?>);
    } else {
        pause(playing);
        play(<?=$row[0]?>);
    }
});
<?php
}
...
?>