php - 用 PHP 分别定义多个 glob

Question

我正在尝试创建一个同时支持 .ogg 和 .mp3 的音板，以适应多种浏览器音频支持。一个 div 只需要显示 .ogg 文件，另一个 div 应该显示 .mp3 文件。但它最终显示了两个 div 的两种文件类型。

<?php
    $files1 = glob("audio/soundboard/*.ogg");
    $files2 = glob("audio/soundboard/*.mp3");
?>

<script>
$(function() {
    $("audio").removeAttr("controls").each(function(i, audioElement) {
    var audio = $(this);
    audio.closest('div').append($('<button>'+audio.attr("title")+'</button>').find('button').click(function() {
        audio[0].play();
    }));
  });
});
</script>

    <div id="ffchrome">
        <?php foreach($files1 as $file) { ?>
            <?php $title = str_replace(".ogg", "", str_replace("audio/soundboard/", "", $file)); ?>
            <audio src="<?php echo $file; ?>" title="<?php echo $title ?>"></audio>
        <?php } ?>
    </div>

    <div id="ie">
        <?php foreach($files2 as $file) { ?>
            <?php $title = str_replace(".mp3", "", str_replace("audio/soundboard/", "", $file)); ?>
            <audio src="<?php echo $file; ?>" title="<?php echo $title ?>"></audio>
        <?php } ?>
    </div>

Answer 1

将其放在文档顶部并删除 div 中所有当前的 javascript：

$(function() {
    $("audio").removeAttr("controls").each(function(i, audioElement) {
    var audio = $(this);
    audio.parent().append($('<button>'+audio.attr("title")+'</button>').click(function() {
       audio[0].play();
    }));
  });
});

您的错误是为页面上的每个音频多次运行 jquery 的“each()”方法。

此外，将 .click 替换为 .bind( 可能是个好主意，但您需要为此参考文档。