如何利用Google Drive API v3 JavaScript正确获取音频文件并解析ID3标签？

我尝试编写代码解析Google Drive文件的ID3标签，按照API文档说明调用gapi.client.drive.files.get，传入文件ID与alt: 'media'参数，再用返回的response.body创建File对象传入标签解析库。这种方法对文本文件有效，但处理音频等二进制文件时，生成的文件既无法读取正确的ID3标签，也无法正常播放。我推测是字符编码问题导致二进制字符串损坏（类似FileReader的readAsBinaryString被弃用的原因），但尚未找到Drive API中的规避方法，也不知道如何从返回的字符串恢复原始数据。

失败代码示例：

let fileRes = await gapi.client.drive.files.get({
    fileId: fileData.id,
    alt: 'media'
}),
    file = new File([fileRes.body], fileData.name, { type: fileData.mimeType }),
    audio = new Audio();
audio.src = URL.createObjectURL(file);
audio.controls = true;
document.body.appendChild(audio);

问题根源在于gapi.client会自动将二进制响应解析为UTF-8字符串，这个过程会破坏原始二进制数据（比如音频文件中的非UTF-8兼容字节）。规避该问题的核心是直接使用fetch或XMLHttpRequest获取二进制数据，它们能正确处理Blob类型的响应：

方法1：使用Fetch API #

async function loadDriveAudio(fileData) {
  const accessToken = gapi.auth.getToken().access_token;
  const response = await fetch(`https://www.googleapis.com/drive/v3/files/${fileData.id}?alt=media`, {
    headers: {
      'Authorization': `Bearer ${accessToken}`
    }
  });

  if (!response.ok) throw new Error('获取文件失败');

  const blob = await response.blob();
  const audio = new Audio(URL.createObjectURL(blob));
  audio.controls = true;
  document.body.appendChild(audio);

  // 将blob传入ID3标签解析库（如jsmediatags）
  // jsmediatags.read(blob, { ... })
}

方法2：使用XMLHttpRequest #

function loadDriveAudio(fileData) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `https://www.googleapis.com/drive/v3/files/${fileData.id}?alt=media`);
  xhr.setRequestHeader('Authorization', `Bearer ${gapi.auth.getToken().access_token}`);
  xhr.responseType = 'blob'; // 指定响应类型为Blob

  xhr.onload = function() {
    if (xhr.status === 200) {
      const blob = xhr.response;
      const audio = new Audio(URL.createObjectURL(blob));
      audio.controls = true;
      document.body.appendChild(audio);

      // 将blob传入ID3标签解析库（如jsmediatags）
      // jsmediatags.read(blob, { ... })
    }
  };

  xhr.send();
}

gapi.client的设计主打处理JSON格式的API响应，处理二进制数据时会默认按UTF-8解码，这会篡改原始字节。而fetch或XMLHttpRequest可以直接将响应以Blob形式接收，完整保留二进制数据，这样生成的音频文件和传入标签解析库的数据都是完整的原始数据，不会出现损坏问题。

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