Vue3 AudioPlayer生产环境播放异常求助：仅Chrome可用，Safari及iOS端失败

问题现象 #

开发环境（通过yarn vite运行，前后端同服务器）：

• 笔记本Chrome、Safari均可正常播放音频
• iPhone的Chrome、Safari均可正常播放音频

生产环境（通过Docker容器部署，Nginx托管构建后的前端，前后端同服务器）：

• 笔记本Chrome可正常播放
• 笔记本Safari无法播放，控制台报错，UI显示“The operation is not supported”
• iPhone的Chrome和Safari均无法播放，同样显示上述提示

后端服务正常运行，请求的是同一页面，怀疑生产环境Nginx配置存在问题，Chrome兼容性更强可正常播放，而Safari及iOS端因严格校验导致失败。

相关代码与配置 #

Vue组件代码 #

<template>
  <div v-for="index in 1" :key="index" >
    <audio-player
      preload="none"  
      :audio-list="['./api/soundfiles?path=/&filename=test-sound.m4a']"
      :show-prev-button="false" :show-next-button="false"  :show-volume-button="false" :show-playback-rate="false" :show-play-loading="false"
      @error="handleAudioError"
    /> 
  </div>
</template>

<script lang="ts">
  // @ts-ignore
  import AudioPlayer from '@liripeng/vue-audio-player' 
  export default {
    methods: { 
      handleAudioError(error: any) {
        console.error(error);
          // Check the error code
        if (error.target.error) {
          console.error('Error code:', error.target.error.code);
        }
      },
    }
  };
</script>

Nginx配置 #

server {
    listen 7331;
    root   /app/nginx/static;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:5000;
        proxy_set_header Origin "";
    }

    location /socket.io {
        proxy_pass http://localhost:5000;
        proxy_set_header Origin "";
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;

        # Specific WebSocket configurations
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Safari生产环境错误信息 #

[Error] Event {isTrusted: true, _vts: 1703011892384, type: "error", target: <audio class="audio-player__audio">, currentTarget: <audio class="audio-player__audio">, …}
    handleAudioError (test3-jSNTJD8p.js:1:144)
    handleAudioError
    mt (index-6Y2yy0e4.js:1:12821)
    $e (index-6Y2yy0e4.js:1:12900)
    n (index-6Y2yy0e4.js:1:59953)

[Error] Error code: – 4
    handleAudioError (test3-jSNTJD8p.js:1:177)
    handleAudioError
    mt (index-6Y2yy0e4.js:1:12821)
    $e (index-6Y2yy0e4.js:1:12900)
    n (index-6Y2yy0e4.js:1:59953)

排查建议 #

1. 校验音频文件MIME类型配置
   Safari对MIME类型校验严格，需确保Nginx或后端返回.m4a文件时设置正确的Content-Type: audio/mp4。可在Nginx配置中添加：

types {
    audio/mp4 m4a;
}

2. 修复Origin头部设置
   生产环境中proxy_set_header Origin ""可能触发Safari的CORS校验失败，改为传递原始请求的Origin：

proxy_set_header Origin $http_origin;

同时确保后端服务允许该Origin的跨域请求。

3. 添加音频播放必需的HTTP头部
   Safari依赖Accept-Ranges: bytes（支持断点续传）、Content-Length（明确文件大小）等头部，可在Nginx中配置：

proxy_set_header Accept-Ranges $http_accept_ranges;
proxy_set_header Content-Length $content_length;

或由后端直接返回这些头部。

4. 验证音频文件编码兼容性
   确认生产环境的音频文件编码符合Safari要求：m4a需使用AAC编码，采样率、比特率在Safari支持范围内。可使用ffmpeg重新编码测试：

ffmpeg -i test-sound.m4a -c:a aac -b:a 128k compatible-test-sound.m4a

5. 测试直接访问音频URL
   在Safari中直接访问音频文件的API地址（如http://your-domain:7331/api/soundfiles?path=/&filename=test-sound.m4a），判断是前端组件问题还是服务端响应问题。

6. 检查CSP配置
   若前端设置了内容安全策略（CSP），需确保策略允许加载音频资源，比如包含media-src 'self'或对应API域名。

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