Supabase存储上传的音频Blob无法播放问题求助

问题分析 #

你通过ElevenLabs API获取的音频在客户端能正常播放，但上传到Supabase Storage后，文件显示类型为audio/mpeg且大小正常，却无法播放、时长显示0:00；手动上传MP3文件则一切正常。核心问题出在对axios返回的Blob数据的二次包装操作上。

原因说明 #

当你在axios配置中设置responseType: "blob"时，voiceResponse.data已经是一个完整且格式正确的音频Blob对象。你执行new Blob([voiceResponse.data], { type: "audio/mpeg" })的操作，相当于把一个Blob对象作为数组元素重新打包成新Blob，这会破坏原始音频文件的二进制结构，导致Supabase存储的文件损坏。

修复方案 #

直接使用axios返回的原始Blob对象上传，不需要二次包装：

const getAudio = async (message) => {
  console.log("called");
  const data = {
    text: "hi",
    voice_settings: {
      stability: 0,
      similarity_boost: 0,
    },
  };

  const config = {
    headers: {
      "xi-api-key": process.env.API_KEY,
    },
    responseType: "blob",
  };
  try {
    const voiceResponse = await axios.post(
      "https://api.elevenlabs.io/v1/text-to-speech/XXXXXXXXXXX",
      data,
      config
    );

    console.log(voiceResponse.data);
    // 直接使用axios返回的原始Blob，无需重新创建
    const blob = voiceResponse.data;
    console.log("=========================================");
    console.log(blob);

    const response = await supabase.storage
      .from("audio_blobs")
      .upload(email + "/" + "audio.mp3", blob, {
        contentType: "audio/mpeg",
      });

    if (response.error) {
      console.log(response.error);
    } else {
      console.log("success");
    }

  } catch (err) {
    console.log(err);
  }
};
getAudio();

额外验证建议 #

• 上传前可在客户端临时创建URL测试Blob有效性：const url = URL.createObjectURL(blob);，用<audio>标签播放确认音频正常。
• 若问题仍存在，检查Supabase存储桶的权限设置，确保文件可通过公开访问或签名URL正常读取。

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