Ajax获取音频生成Blob URL作为Audio源无法播放问题求助

问题根源 #

jQuery的Ajax请求默认会将响应数据以文本格式解析，但音频文件属于二进制数据，文本解析会破坏原始字节结构，导致后续生成的Blob对象无效，最终audio元素无法识别音频内容，播放按钮持续处于禁用状态。

解决方案 #

在Ajax配置中添加xhrFields: { responseType: 'blob' }，让浏览器直接返回Blob类型的响应数据，无需手动转换，确保音频数据的完整性。

修改后的完整代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <audio id="audio" src="" controls></audio>
    <script>
        $.ajax({
            url: 'test.mp3',
            method: 'GET',
            xhrFields: {
                responseType: 'blob' // 指定响应类型为二进制Blob
            },
            success: function (blob) {
                var blobUrl = URL.createObjectURL(blob);
                $('#audio').attr('src', blobUrl);
            },
            error: function (error) {
                console.error('Error fetching audio:', error);
            }
        });
    </script>
</body>
</html>

额外注意事项 #

• 确认test.mp3的文件路径正确，服务器可正常返回该资源
• 若存在跨域请求，需确保目标服务器配置了CORS允许当前域名访问
• 无需手动创建Blob对象，直接使用Ajax返回的Blob即可，避免二次转换导致的数据损坏

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