In 99% of cases, when the player does not play audio, it means that you have a CORS issue.

Identify the problem #

To check if the issue you’re experiencing with Audio Spectrum is caused by a CORS error, you can do the following:

Step 1 – Open the browser console by right-clicking on the page and selecting “Inspect” or pressing the F12 key.

Step 2 – Look for error messages in the console. If a CORS error is occurring, you should see an error message that includes the words “CORS” or “cross-origin”. For example, you might see an error message like:

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

See screenshot of a real example.

If you’re not sure whether the issue is caused by a CORS error, you can also try the following steps:

Step 1 – Check that the audio file is accessible by directly visiting the URL of the audio file in the browser. If you’re NOT able to access the audio file directly, then the issue is likely NOT caused by a CORS error.

Step 2 – Try loading a different audio file from the same domain or subdomain as the web page. If the different audio file loads successfully, then the issue is likely caused by a CORS error.

If you have a CORS issue, keep reading.

Explanation of the problem #

When using Animated Audio Spectrum, the Web Audio API is used instead of the native HTML Audio Element. While the HTML Audio Element allows for basic audio playback functionality that works with cross-origin audio files, the Audio Spectrum (Web Audio API) provides more advanced features for manipulating and synthesizing audio.

One potential issue when using the Audio Spectrum with cross-origin audio files is the occurrence of a CORS (Cross-Origin Resource Sharing) error as stated before. This error occurs when the browser is unable to load the audio file due to the security policy that restricts web pages from making requests to resources on a different domain or subdomain unless the server hosting the resource has explicitly allowed such requests by setting appropriate CORS headers.

Solutions & Workarounds #

If you encounter a CORS error when using the Web Audio API (Audio Spectrum), there are several solutions you can try:

Solution 1 – Sometimes, you might use a CDN (and you may not even know it !). It’s often the case if you are using GoDaddy as a hosting. Check with your hosting provider to disable CDN from your hosting panel. This avoids the need for cross-origin requests and eliminates the CORS error.

Solution 2 – Serve the audio file from the same domain or subdomain as the web page. This avoids the need for cross-origin requests and eliminates the CORS error.

Solution 3 – Configure the server hosting the audio file to allow cross-origin requests by adding the appropriate CORS headers to the server response. You may want to reach your hosting provider for this. The exact headers needed depend on the server configuration, but generally involve allowing the Origin header and specifying which domains are allowed to make cross-origin requests.

The server hosting the audio file needs to add the appropriate CORS headers to the server response, which allows the browser to load the file and share resources across different domains. Here’s how to do it:

Apache Server – If the server is running Apache, you can add the following lines to the .htaccess file in your root folder:

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>

Save the .htaccess file and restart the server.

NGINX Server – If the server is running Nginx, open the Nginx configuration file (usually located at /etc/nginx/nginx.conf) and add the following code:

add_header 'Access-Control-Allow-Origin' '*';

Save the file and restart the server.

This will set the required CORS headers for all audio files in the directory, allowing them to be accessed from any domain.

If you’re not sure how to configure the server or add the required headers, it’s best to consult with your server administrator or hosting provider. They should be able to assist you with the setup and ensure that the appropriate security measures are in place.

Solution 4 – Use a proxy server to serve the audio file. This involves making a request to a server that is on the same domain as the web page, which then makes a request to the server hosting the audio file and returns the audio data to the web page. This can bypass CORS restrictions, but adds latency and requires additional server resources.

A great script for this is: https://github.com/Rob–W/cors-anywhere

We strongly recommend hiring a Web developer to implement this for you.

Conclusion #

In conclusion, if you encounter audio playback issues, it’s essential to check for CORS errors. This documentation provides steps to identify and solve the problem by serving audio files from the same domain, configuring the server to allow cross-origin requests, or using a proxy server. It’s recommended to seek assistance from a web developer for the implementation of these solutions.