NGNIX proxy breaking HTML play() - html

Question

I have a strange problem with ngnix as a reverse proxy breaking the HTML DOM play() method. I have nginx running in a Docker container as a proxy for a couple web applications and a node api running in individual Docker containers.
If access the the web app that uses HTML play() proxied through nginx the sounds don't play and I get a
Uncaught (in promise) DOMException: The element has no supported sources.
error in the browser. This is Chrome but I get something similar in Safari.
When I expose port 8080 on the application container and access the page directly the sounds play, no issues. What's even more confusing is that there are four different play() statements and one works while the others don't.
For testing I created a very simplified webpage to make sure nothing else was causing this issue:
<button onclick="playRed()">Red</button>
<button onclick="playGreen()">Green</button>
<script>
var soundGreen = new Audio("./sound/Ding.mp3");
var soundRed = new Audio("./sound/Ding-ding-ding-sound.mp3");
function playRed() {
soundRed.play();
}
function playGreen() {
soundGreen.play();
}
</script>
The web applications are running in http:2.4-alpine images.
I'm using the nginx:1.13 official image with the following default.conf:
server {
listen 80 default_server;
location / {
proxy_pass http://web/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
location /vnode {
proxy_pass http://vnode/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
location /api {
proxy_pass http://api:3000/api;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
}
The application that's breaking is on the /vnode path.

Answer 1

After sleeping on the problem, I realized the issue was caused by a bad path. Since this wasn't set up as a virtual server all assets needed to be fully pathed as below.
var soundGreen = new Audio("vnode/sound/Ding.mp3");
var soundRed = new Audio("vnode/sound/Ding-ding-ding-sound.mp3");
What made the problem unclear is the fact that there were no 404 errors generated even though the files were not accessible.
I still don't understand how one sound was working but it also stopped working as I experimented more. Not a good answer to that one, but it works now.