JavaScript中无法播放MP3文件问题排查请求

问题场景 #

编写的JavaScript代码如下：

function playAudio( spext ) {
    if( spext == "mp3" ){
        document.getElementById("bpShow").innerHTML = "<audio><source src='/group/16/624.mp3' type='audio/mpeg'></audio>";
    }
    else if( spext == "wav" ){
        document.getElementById("bpShow").innerHTML = "<audio><source src='/group/16/623.wav' type='audio/wav'></audio>";
    }
}

MP3与WAV文件在同一文件夹，WAV可正常播放，但调用playAudio("mp3")时，控制台返回：

GET http://localhost/group/16/624.mp3 [HTTP/1.1 301 Moved Permanently 0ms]

问题核心原因 #

301状态码表示服务器判定你请求的MP3文件地址已永久迁移，但浏览器的audio标签没有正确处理这个重定向，或者重定向后的地址本身不可用。WAV能正常播放说明基础路径、服务器静态文件配置没问题，问题集中在MP3文件的实际路径或服务器对MP3的特殊处理规则上。

排查与解决步骤 #

• 核对MP3文件信息：检查服务器/group/16/目录下是否存在624.mp3，注意文件名大小写（部分Linux服务器区分大小写，比如624.MP3和624.mp3会被视为不同文件）、后缀是否正确。
• 查看重定向目标地址：打开浏览器开发者工具的「网络」标签，找到该301请求，查看响应头里的Location字段，确认服务器把请求导向了哪个地址，直接在浏览器地址栏访问这个地址测试是否能打开MP3。
• 检查服务器规则：排查服务器是否对MP3文件设置了重定向、URL重写规则，或者开启了针对音频文件的特殊处理，导致MP3请求被错误转发。
• 替换为有效路径：如果重定向后的地址是可用的，直接把代码里MP3的src改成这个目标地址即可。

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