iOS浏览器无法播放Express返回的WAV音频问题求助

1. 确认WAV文件编码符合iOS要求 #

iOS的Safari/Chrome仅支持PCM编码的WAV文件（线性脉冲编码调制），不支持压缩格式的WAV（如ADPCM、MP3编码封装的WAV）。

• 用ffmpeg检查音频编码：

  ffmpeg -i your-audio-file.wav
  

  查看输出中Audio行的编码格式，需包含pcm_s16le（16位PCM）类似字段。
• 若编码不符合，转码为兼容格式：

  ffmpeg -i input.wav -acodec pcm_s16le -ar 44100 -ac 2 output.wav
  

  转码参数说明：16位深度、44.1kHz采样率、立体声，是iOS最兼容的配置。

2. 完善Express服务器响应头 #

iOS浏览器需要明确的Content-Length才能正确加载音频流，补充响应头设置：

router.get("/audio/:objectId", async (req, res) => {
    const { objectId } = req.params;
    const audio = await getAudio(objectId);

    res.set({
        'Content-Type': 'audio/wav',
        'Content-Length': audio.buffer.length, // 必须设置，告知文件大小
        'Accept-Ranges': 'bytes' // 可选，支持断点续传
    });
    res.send(audio.buffer);
});

3. 前端用Blob对象处理音频数据 #

避免直接使用接口URL，通过fetch获取音频缓冲后转为Blob，再生成ObjectURL供audio标签使用（以Vue为例）：

async loadAudio(objectId) {
    try {
        const response = await fetch(`/audio/${objectId}`);
        const arrayBuffer = await response.arrayBuffer();
        const audioBlob = new Blob([arrayBuffer], { type: 'audio/wav' });
        this.url = URL.createObjectURL(audioBlob);
    } catch (err) {
        console.error('加载音频失败:', err);
    }
}

<audio controls :src="url" type="audio/wav"></audio>

4. 适配iOS用户交互播放限制 #

iOS要求音频播放必须由用户主动触发（如点击事件），若动态加载音频，可手动绑定播放触发逻辑：

<audio controls ref="audioEl" :src="url" type="audio/wav"></audio>
<button @click="triggerPlay">播放音频</button>

triggerPlay() {
    this.$refs.audioEl.play().catch(err => {
        console.error('播放触发失败:', err);
    });
}

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