Why is audio not playing from a WaveSurfer.js Django site (MediaElementAudioSource outputs zeroes due to CORS access restrictions...)?

Question

Django

For some reason, the audio file on the site on the production server does not play.
The files are hosted on the Selectel repository and downloaded from Selectel's CDN.
When loading the page in the console, the error MediaElementAudioSource outputs zeroes due to CORS access restrictions for https://cdn.x.fullfocus.uz/media/audio/2021/12/20/...

On NGINX and CDN settings and storage headers Access -Control-Allow-Origin=*

nginx settings

server {
        server_name xabardor.uz;
        client_max_body_size 500M;
        access_log /var/log/nginx/xabardor.log;

        root /var/www/html;

        index index.html index.html index.nginx-debian.html;

        location ~* \.(eot|ttf|woff|woff2|mp3|wav|ogg|wob)$ {
                add_header Access-Control-Allow-Origin *;
        }

        location / {
                proxy_pass http://127.0.0.1:8001;
                proxy_set_header X-Forwarded-Host $server_name;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header Host $http_host;
                add_header P3P 'CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV"';
                add_header 'Accept-Encoding' 'gzip, deflate';
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' '*';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-CustomHeader,Keep-Alive,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        }

        location = /favicon.ico {
                root /home/www/xabardoruz-django/xabardor/news/static/news/images/favicon.png;
        }

        location /static/ {
                root /home/www/xabardoruz-django/xabardor/static_files;
        }



    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/xabardor.uz/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/xabardor.uz/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

Screenshot of CDN
settings Screenshot of storage settings
Screenshot of browser's Network settings

Has anyone encountered a similar problem, what could be the problem?
Without WaveSurfer.js with a regular audio tag, everything works fine.

Answer 1

Try adding crossOrigin = "anonymous"