If your audio player displays in the sticky footer but doesn’t play tracks, the issue is often related to a CORS (Cross-Origin Resource Sharing) policy or CDN configuration. This typically occurs when audio files are hosted on a domain or subdomain different from the website where the player is embedded.

Identifying the Issue:

Check the Console Log: Open the browser console (right-click and select “Inspect” or press F12) and look for error messages. A typical error might look like this one:

Access to audio file at 'http://example.com/audio.mp3' from origin 'http://yourdomain.com' has been blocked by CORS policy.

See screenshot: https://d.pr/i/Be7qSM

Why Does This Happen?

Most of the time, it’s because you are using our feature Animated Audio Spectrum. When using this feature, the player uses WebAudioAPI and JavaScript to load and play audio files. If your audio files are hosted on a different domain, the browser enforces security rules that block access unless the hosting server explicitly allows it via CORS headers. This can also happen if a Content Delivery Network (CDN) is used to serve audio files.

Resolving the Issue

There are 3 different options to resolve this issue:

Option 1 – Configure CORS Headers on the Audio File Server. If you are unsure how to apply CORS headers, contact your hosting or CDN provider and request: CORS headers that allow your domain.

Option 2 – If you are using our MP3 Audio Player Pro plugin: Disable Animated Audio Spectrum

Option 3 – If you are using our Sonaar WordPress Theme: Disable Real-time Spectrum Analyzer in WP-Admin > Theme Options > General Settings

Option 4 – You disable your CDN