为何这段音频播放代码在Safari可用却无法在Chrome运行？

谷歌翻译的TTS接口带有防盗链机制，Chrome下直接通过<audio>标签引用该URL会被服务器拒绝请求，而Safari的默认请求头恰好符合谷歌的验证规则，所以能正常播放。要在Chrome中实现播放，需要通过Fetch API模拟合法请求获取音频数据，再通过Blob URL播放，完全不需要生成本地MP3文件。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<body>
<h2>Works in both Safari and Chrome</h2>
<button id="button" onclick="sound()">Play sound</button>
<p id="demo"></p>

<script>
async function sound() {
  try {
    // 构造目标音频请求URL
    const ttsUrl = 'https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=fr&q=je%20m%E2%80%99appelle%20Sebasti%C3%A9n';
    
    // 发送请求，模拟Chrome浏览器请求头绕过防盗链
    const response = await fetch(ttsUrl, {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
      }
    });

    if (!response.ok) throw new Error('音频请求失败');
    
    // 将响应转为Blob二进制对象
    const audioBlob = await response.blob();
    // 生成本地可访问的Blob URL
    const audioUrl = URL.createObjectURL(audioBlob);

    // 创建临时音频元素播放
    const audio = new Audio(audioUrl);
    await audio.play();

    // 播放结束后释放Blob URL资源，避免内存泄漏
    audio.onended = () => {
      URL.revokeObjectURL(audioUrl);
    };
  } catch (err) {
    document.getElementById('demo').textContent = '播放失败: ' + err.message;
  }
}
</script>
</body>
</html>

核心改动说明 #

• 请求头模拟：添加User-Agent头，让谷歌服务器识别为合法的Chrome浏览器请求，避免被拦截。
• Blob URL播放：通过Fetch获取音频二进制数据转为Blob，再生成本地可访问的临时URL，绕开直接跨域引用的限制。
• 资源清理：播放结束后主动释放Blob URL，避免浏览器内存占用过高。

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