PHP布道列表中HTML5 Audio播放器仅播放首个MP3的问题

核心问题原因 #

1. 表单ID重复：所有布道项的表单都使用了同一个id="sermonform"，同时按钮的form属性也指向这个重复ID。HTML规定id必须是页面唯一的，浏览器只会识别第一个匹配的表单元素，因此无论点击哪个播放按钮，最终提交的都是第一个表单的隐藏字段值。
2. 潜在缓存问题：浏览器可能缓存了旧的音频页面请求，即使POST参数正确，也会返回之前的音频内容。

具体修复步骤 #

1. 确保表单ID唯一性 #

每个布道表单需要分配唯一的ID，按钮的form属性也要对应这个唯一ID。

静态HTML示例：

<!-- 第一个布道项 -->
<form id="sermonform-2022-0904" action="sermon-player.php" method="post">
    <button type="submit" form="sermonform-2022-0904">PLAY</button>
    <input type="hidden" name="sermon" value="2022-0904.mp3"> Just Like the Clay and the Potter
</form>

<!-- 第二个布道项 -->
<form id="sermonform-2022-0911" action="sermon-player.php" method="post">
    <button type="submit" form="sermonform-2022-0911">PLAY</button>
    <input type="hidden" name="sermon" value="2022-0911.mp3"> The Parable of the Sower
</form>

PHP循环生成示例（更高效）：

<?php
// 布道列表数据
$sermonList = [
    "2022-0904.mp3" => "Just Like the Clay and the Potter",
    "2022-0911.mp3" => "The Parable of the Sower",
    "2022-0918.mp3" => "Faith That Moves Mountains"
];

foreach ($sermonList as $audioFile => $sermonTitle) {
    // 基于文件名生成唯一表单ID
    $uniqueFormId = "sermonform-" . str_replace(".mp3", "", $audioFile);
?>
<form id="<?php echo $uniqueFormId; ?>" action="sermon-player.php" method="post">
    <button type="submit" form="<?php echo $uniqueFormId; ?>">PLAY</button>
    <input type="hidden" name="sermon" value="<?php echo $audioFile; ?>"> <?php echo $sermonTitle; ?>
</form>
<?php } ?>

2. 禁用页面缓存（处理端优化） #

在sermon-player.php中添加缓存控制头，强制浏览器每次请求都获取最新内容，同时增加安全校验防止非法请求：

<?php
// 设置缓存控制头，禁止浏览器缓存页面
header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");

// 安全校验：仅允许合法的MP3文件名
if (isset($_POST['sermon']) && preg_match('/^[\w-]+\.mp3$/', $_POST['sermon'])) {
    $sermon_name = $_POST['sermon'];
    echo "
    <audio id=AudioBox controls autoplay>
        <source src=sermons/2022/$sermon_name type=audio/mpeg>
        Your older browser does not support HTML5 audio.
    </audio>";
} else {
    echo "无效的音频请求";
}
?>

内容的提问来源于stack exchange，提问作者Travel2Learn