php - PHP で複数の glob を個別に定義する

Question

複数のブラウザ オーディオ サポートに対応するために、.ogg と .mp3 の両方をサポートするサウンドボードを作成しようとしています。1 つの div は .ogg ファイルのみを表示する必要があり、もう 1 つの 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>