使用AJAX、PHP与AWS Polly实现HTML5音频Blob播放失败排查

问题根源 #

核心问题是前端AJAX默认将响应解析为文本格式，导致AWS Polly返回的二进制音频数据被错误编码，生成的Blob文件损坏，最终无法播放。同时后端的部分响应头设置也可能干扰二进制数据的传输。

解决方案 #

1. 前端AJAX修改（关键） #

强制AJAX接收二进制数据，在jQuery的ajax配置中添加xhrFields指定响应类型为arraybuffer，再将其转为Blob：

<script>
jQuery(function ($) {
    $('#play').click(function(){
        let text = $('#story').val();
        const url = 'process.php'

        $.ajax({
            type: "POST",
            url: url,
            data:{
                text: text
            },
            // 关键配置：指定接收二进制数组
            xhrFields: {
                responseType: 'arraybuffer'
            },
            success: function (data){
                // 将arraybuffer转为Blob
                var audioblob = new Blob([data], {type: 'audio/mpeg'});
                var objectURL = URL.createObjectURL(audioblob);
                // 重置audio元素避免缓存问题
                $('#audioplayer')[0].pause();
                $('#audiosource').attr('src', objectURL);
                $('#audioplayer')[0].load();
                $('#audioplayer').trigger('play');
            }
        })
    });
 });
</script>

2. 后端PHP调整 #

移除不必要的Content-Transfer-Encoding: chunked头，直接输出音频流而非先读入内存，提升效率同时避免数据损坏：

<?php
$polly = new Aws\Polly\PollyClient([
    'version' => 'latest',
    'region' => 'us-east-2',
    'credentials' => [
        'key' => 'XXXXXXX',
        'secret' => 'XXXXXX',
    ]
]);

$text = $_POST['text'];

$result_polly = $polly->synthesizeSpeech([
    'Engine' => 'standard',
    'LanguageCode' => 'es-MX',
    'OutputFormat' => 'mp3',
    'Text' => $text, 
    'TextType' => 'text',
    'VoiceId' => 'Mia', 
]);

// 获取音频流资源
$audioStream = $result_polly->get('AudioStream');

// 设置正确响应头并输出流
header("Content-Type: audio/mpeg");
fpassthru($audioStream);
exit;

3. 额外注意事项 #

• 确保PHP文件中没有输出任何额外空白字符（比如PHP标签前后的空格），否则会破坏二进制音频数据。
• 兼容旧浏览器可改用srcObject直接赋值Blob：

  $('#audioplayer')[0].srcObject = audioblob;
  

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