Question

我正在使用mySQL从表中提取所有现有的歌曲数据。一切都运行正常，除了可以一次播放多首歌曲。我已尝试以各种方式解决这个问题，但没有任何工作，也没有任何错误。

可在此处查看：http://www.sensationshowband.com/videomusicgallery/

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

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

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

虽然没有用。是因为我正在创建一个元素而不是一个实际的音频标签吗？

Answer 1

是的，那太乱了。无论如何，这是一个应该有效的解决方案。

使用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：

<?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
}
...
?>

jquery - 一次播放一个audioElement

1 个答案: