通过Fetch API获取数据库音频链接，移动端无法播放的解决方案

针对你遇到的PC端正常、移动端无法播放音频的问题，核心原因是移动端浏览器的播放安全限制（防止无交互自动播放打扰用户）以及音频加载的兼容性问题，下面给出具体解决办法：

一、优化现有audio标签方案 #

1. 增强音频预加载配置 #

给audio标签加上preload="auto"，让浏览器提前加载音频资源，避免点击时资源未就绪：

<audio id="result-audio" preload="auto"></audio>
<button onclick="playBack()"><i class="fas fa-volume-up"></i></button>

2. 完善播放函数的加载逻辑与错误处理 #

移动端的play()方法返回Promise，可能因资源未加载完成、权限问题等失败，修改playBack函数，加入加载判断和错误捕获：

fetch(`${url}`)
  .then(response => response.json())
  .then(data => {
    const audio = document.getElementById("result-audio");
    audio.src = data['File']; // 直接赋值src属性，比setAttribute兼容性更好
  });

async function playBack() {
  const audio = document.getElementById("result-audio");
  try {
    // 若音频未加载完成，强制触发加载
    if (audio.readyState < 2) {
      await audio.load();
    }
    await audio.play();
  } catch (err) {
    console.error("播放出错:", err);
    // 可选：给用户提示，比如"播放失败，请重试"
  }
}

二、替代方案：使用Web Audio API #

如果audio标签方案仍有问题，Web Audio API更灵活，且完全适配移动端的交互限制，适合单词发音这类轻量播放场景：

<button id="play-btn"><i class="fas fa-volume-up"></i></button>

let audioContext;
let audioBuffer;
const playBtn = document.getElementById("play-btn");

playBtn.addEventListener("click", async () => {
  // 移动端要求AudioContext必须由用户交互触发初始化
  if (!audioContext) {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
  }

  // 仅首次点击时加载音频资源，后续点击直接播放缓存
  if (!audioBuffer) {
    try {
      const response = await fetch(`${url}`);
      const data = await response.json();
      const audioRes = await fetch(data['File']);
      const arrayBuffer = await audioRes.arrayBuffer();
      audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
    } catch (loadErr) {
      console.error("音频加载失败:", loadErr);
      return;
    }
  }

  // 创建播放源并启动播放
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  source.start();
});

这种方式完全在用户点击事件内完成初始化、加载和播放，完美适配移动端安全政策，且加载一次后可重复播放，效率更高。

三、额外注意事项 #

• 跨域配置：确保音频文件所在服务器开启了正确的CORS规则，允许你的网页域名访问，移动端对跨域资源的限制更严格。
• 格式兼容性：优先使用MP3格式，它在移动端各浏览器的支持度最高。
• 多浏览器测试：分别测试Safari（iOS）、Chrome（Android）等主流移动端浏览器，不同厂商的限制细节略有差异。

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