AudioPlayer Vue3: #不支持该操作 // Chrome 可以在 Laptop 上运行，但不能在 Safari 上运行，两者都不能在 iPhone 上运行（但它们都可以在 DEV 中运行）

Question

我正面临着一个奇迹，我想知道是否有人明白这里发生了什么。 我的 Vite/Vue3 应用程序中的以下代码显示了一个“播放”按钮，我观察到这种不一致的行为：

在我的开发机器上运行时（后端+前端在同一服务器上）

• 在笔记本电脑上：Chrome 可以播放音乐
• 在笔记本电脑上：Safari 可以播放音乐
• 在 iPhone 上：Chrome 可以播放音乐
• 在 iPhone 上：Safari 可以播放音乐

在我的生产机器上运行时（同一服务器上的后端 + 前端，在 Docker 容器中）

• 在笔记本电脑上：Chrome 可以播放音乐
• 在笔记本电脑上：Safari 无法播放音乐并在控制台中输出以下错误消息
• iPhone 上：Chrome 和 Safari 都无法播放

查询在完全相同的时间打开完全相同的页面，并且后端肯定已启动并正在运行。

在 Prod 上、笔记本电脑上的 Safari、PROD 中 iPhone 上的 Safari + Chrome 会在 UI 上显示以下消息：

不支持该操作。

我的预感是我在 PROD / nginx 中的服务器设置有缺陷，Chrome 对我比 Safari 更宽容，因此可以工作，而 Safari 却失败了。

我无法理解错误消息，并且希望任何能帮助我解决此问题的指针。

谢谢大家的宝贵时间。

PS：nginx 中的 socket.io 位可能不相关，但我无论如何都粘贴了它，因此它显示了完整的配置。 m4a 文件通过 REST API 提供，而不是通过 socket.io

PS2：后端是一个gunicorn/flask服务器，如果对分析有帮助，很乐意粘贴详细信息

PS3：当我在上面写“DEV”时，我的意思是使用“yarn vite”运行的 UI，而不是 nginx 在构建它之后为其提供服务（yarn build）；我通过 docker 容器完成此操作。

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)

Answer 1

解决方案如下：

location /api {
    proxy_pass http://localhost:5000;
    proxy_set_header Origin "";
    add_header 'Content-Type' 'audio/mpeg'; # <<<<< Needed to add this to make it work with Safari/Chrome on iOS & Safari on OSX
}