Firefox中某Web应用无法播放MP3音频的排查求助

我有两个使用HTML <audio>标签展示音频的Web应用，其中一个能在Firefox中正常播放MP3文件，另一个却无法播放，Firefox给出的报错信息为：

All candidate resources failed to load. Media load paused.

注：我已查阅过类似问题，但相关内容大多是5-10年前的。

对比情况 #

• 无法播放的代码：

<audio controls>  <source src="/media/my_audio.mp3" /></audio>

• 可正常播放的代码：

<audio controls="">  <source src="/media/other_audio.mp3"></audio>

该代码在Chrome中也能正常播放

• 其他站点的音频在Firefox中可正常播放

已尝试的解决方法 #

• CORS相关：最初音频与页面不同域，尝试为<audio>标签添加crossorigin属性，通过.htaccess设置宽松的Access-Control-Allow-*: *响应头，甚至将音频移至同域，均无效。
• 音频文件：虽音频在Chrome和Edge中可播放，仍用FFmpeg重新编码，也尝试替换为可正常播放的应用中的短音频；直接访问音频URL在Firefox中可播放，排除文件本身问题。
• JavaScript控制：无法播放的应用中有跳转音频进度的按钮，通过JS操作currentTime，暂未发现异常。
• 动态创建元素：<audio>标签及页面内容通过JS的document.createElement('template')和innerHTML创建后添加到页面，暂未发现问题。
• MIME类型：在音频所在服务器的.htaccess中添加Content-Type: "audio/mpeg"头，也在<source>标签中指定MIME类型，无效。

补充信息 #

无法播放的MP3前40字节：

FF FB 90 44  00 00 00 00  00 00 00 00  00 00 00 00 00 00 00 00  00 00 00 00  00 00 00 00  00 00 00 00 00 00 00 00  58 69 6E 67

MP3的魔数应为FF FB（无ID3v2元数据），但尝试其他以ID3开头的MP3也无法播放。

完整HTML结构 #

#content内的内容通过JS动态创建，音频URL通过$interview.audio_path插入，iframe加载Google文档，整体#interview-editor元素添加到#content中：

<body>    <div id="nav-bar">        ...    </div>    <div id="content">        <div id="interview-editor" class="right-sidebar">            <div id="interview-audio">                <a data-action="replay_30" class="btn-large">30</a>                <a data-action="replay_10" class="btn-large">10</a>                <a data-action="replay_5" class="btn-large">5</a>                <audio id="audio-control" controls src="${interview.audio_path}"></audio>                <!-- above is what i did originally, then tried this variation as well                <audio id="audio-control" controls>                    <source src="${interview.audio_path}">                </audio> -->                <a data-action="forward_5" class="btn-large">5</a>                <a data-action="forward_10" class="btn-large">10</a>                <a data-action="forward_30" class="btn-large">30</a>            </div>            <div id="interview-transcript">                <iframe src="${interview.text_path}" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>            </div>        </div>    </div></body>

音频跳转按钮的JS代码 #

function onButtonClick(btn) {    // action can be close or one of the audio skip buttons    const action = btn.dataset.action;    if (action.startsWith("replay") || action.startsWith("forward")) {        let [direction, amount] = action.split("_");        amount = Number(amount);        if (direction === "replay") amount *= -1        console.log(`audio seek: ${amount}`);        const audioControl = document.getElementById("audio-control");        audioControl.currentTime += amount;    } else {        console.error(`error: unknown action ${action}`);    }}

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