Javascript Nginx音频文件（wav/ogg/mp3）不工作

prod上的音频在dev环境（Angular 7）上正常工作时无法正常工作

产品配置（VPS）：

• Ubuntu 18
• Nginx
• 让我们加密

音频服务：

export class AudioService {

    audio = new Audio();

    constructor() { }

    isPlaying() {
        return this.audio.currentTime > 0 && !this.audio.paused && !this.audio.ended && this.audio.readyState > 2;
    }

    play(name: string): void {
        this.audio.src = `assets/audio/${name}`;
        this.audio.crossOrigin = 'anonymous';
        this.audio.load();

        if (!this.isPlaying()) {
            this.audio.play();
        }
    }

    pause(): void {
        if (this.isPlaying()) {
            this.audio.pause();
        }
    }
}

COR在Nodejs端启用（使用Nestjs）main.ts：

app.enableCors();

# Redirection
server {
   # if ($host = mywebsite.com) {
   #     return 301 https://$host$request_uri;
   # } # managed by Certbot

    listen 80;
    listen [::]:80;
    server_name mywebsite.com www.mywebsite.com;
    return 301 https://$host$request_uri;
    #return 404; # managed by Certbot

}

# Config
server {
     server_name mywebsite.com www.mywebsite.com;

     root /home/foo/mywebsite/gui;

     index index.html index.htm;

     location / {
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header Host $http_host;
       proxy_set_header X-NginX-Proxy true;
       proxy_pass    http://my.ip:3000/;

       # Websocket
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "upgrade";
    }

    if ($host = 'www.mywebsite.com') {
       return 301 https://mywebsite.com$request_uri;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mywebsite.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mywebsite.com/privkey.pem; # managed by Certbot
}

Chrome日志：

export class AudioService {

    audio = new Audio();

    constructor() { }

    isPlaying() {
        return this.audio.currentTime > 0 && !this.audio.paused && !this.audio.ended && this.audio.readyState > 2;
    }

    play(name: string): void {
        this.audio.src = `assets/audio/${name}`;
        this.audio.crossOrigin = 'anonymous';
        this.audio.load();

        if (!this.isPlaying()) {
            this.audio.play();
        }
    }

    pause(): void {
        if (this.isPlaying()) {
            this.audio.pause();
        }
    }
}

未捕获（承诺中）DOMEException:未能加载，因为没有 找到了支持的源

Firefox日志：

export class AudioService {

    audio = new Audio();

    constructor() { }

    isPlaying() {
        return this.audio.currentTime > 0 && !this.audio.paused && !this.audio.ended && this.audio.readyState > 2;
    }

    play(name: string): void {
        this.audio.src = `assets/audio/${name}`;
        this.audio.crossOrigin = 'anonymous';
        this.audio.load();

        if (!this.isPlaying()) {
            this.audio.play();
        }
    }

    pause(): void {
        if (this.isPlaying()) {
            this.audio.pause();
        }
    }
}

NotSupportedError：由src属性指示的媒体资源 或分配的媒体提供程序对象不合适

查看网络控制台，我们可以看到myaudio.wav带有：

状态代码：206部分内容

注意：加载图像效果很好

编辑：

export class AudioService {

    audio = new Audio();

    constructor() { }

    isPlaying() {
        return this.audio.currentTime > 0 && !this.audio.paused && !this.audio.ended && this.audio.readyState > 2;
    }

    play(name: string): void {
        this.audio.src = `assets/audio/${name}`;
        this.audio.crossOrigin = 'anonymous';
        this.audio.load();

        if (!this.isPlaying()) {
            this.audio.play();
        }
    }

    pause(): void {
        if (this.isPlaying()) {
            this.audio.pause();
        }
    }
}

Nginx config/etc/Nginx/sites available/mywebsite：

app.enableCors();

# Redirection
server {
   # if ($host = mywebsite.com) {
   #     return 301 https://$host$request_uri;
   # } # managed by Certbot

    listen 80;
    listen [::]:80;
    server_name mywebsite.com www.mywebsite.com;
    return 301 https://$host$request_uri;
    #return 404; # managed by Certbot

}

# Config
server {
     server_name mywebsite.com www.mywebsite.com;

     root /home/foo/mywebsite/gui;

     index index.html index.htm;

     location / {
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header Host $http_host;
       proxy_set_header X-NginX-Proxy true;
       proxy_pass    http://my.ip:3000/;

       # Websocket
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "upgrade";
    }

    if ($host = 'www.mywebsite.com') {
       return 301 https://mywebsite.com$request_uri;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mywebsite.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mywebsite.com/privkey.pem; # managed by Certbot
}

在开发环境localhost上：4200/assets/audio/myaudio.wav→ 很好

论产品环境→ 返回主页

当→ 很好

只有音频不工作。

设置为0

对于您的情况，这看起来像这样：

location ~ \.wav$ {
    max_ranges 0;
}

---

这意味着该规则适用于每个

wav

文件，无论其位置如何。

听起来像是prod服务器上缺少音频编解码器。@TGrif在安装ubuntu受限附加程序后仍然无法工作。@TGrif我认为这是Nginx的问题。更新了我的问题。你能评论一下你的

nginx

config@midrizi已尝试

错误错误：未捕获（承诺中）：错误：无法匹配任何路由。URL段：“assets/audio/clock.wav”错误：无法匹配任何路由。URL段：'assets/audio/clock.wav'

（尽管文件存在）它可以工作！我在这上面浪费了这么多时间，这是一个非常简单的解决方案。真不敢相信我什么都没找到…希望能帮上忙！