Nginx 音频文件 (wav/ogg/mp3) 不工作
Nginx audio files (wav/ogg/mp3) not working
生产环境中的音频无法正常工作,而在开发环境中可以正常工作 (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();
}
}
}
在 Nodejs 端启用了 CORS(使用 Nestjs)。 main.ts:
app.enableCors();
Chrome 日志:
Uncaught (in promise) DOMException: Failed to load because no
supported source was found.
Firefox 日志:
NotSupportedError: The media resource indicated by the src attribute
or assigned media provider object was not suitable.
查看网络控制台,我们可以看到 myaudio.wav 有:
Status Code: 206 Partial Content
注意:加载图片效果很好!
编辑:
Nginx 配置/etc/nginx/sites-available/mywebsite:
# 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 → 工作正常
产品环境https://mywebsite.com/assets/audio/myaudio.wav→returns主页
虽然 https://mywebsite.com/assets/image.jpg → 工作正常
只有音频不工作。
将 max_ranges
设置为 0。
对于你的情况,这看起来像这样:
location ~ \.wav$ {
max_ranges 0;
}
意味着该规则适用于每个 wav
文件,无论其位置如何。
生产环境中的音频无法正常工作,而在开发环境中可以正常工作 (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();
}
}
}
在 Nodejs 端启用了 CORS(使用 Nestjs)。 main.ts:
app.enableCors();
Chrome 日志:
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
Firefox 日志:
NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable.
查看网络控制台,我们可以看到 myaudio.wav 有:
Status Code: 206 Partial Content
注意:加载图片效果很好!
编辑:
Nginx 配置/etc/nginx/sites-available/mywebsite:
# 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 → 工作正常
产品环境https://mywebsite.com/assets/audio/myaudio.wav→returns主页
虽然 https://mywebsite.com/assets/image.jpg → 工作正常
只有音频不工作。
将 max_ranges
设置为 0。
对于你的情况,这看起来像这样:
location ~ \.wav$ {
max_ranges 0;
}
意味着该规则适用于每个 wav
文件,无论其位置如何。