7

I am attempting to create an audio visualization program on codepen.io (http://codepen.io/www139/pen/oLrJAZ?editors=0010). I have built my own web server which I used to upload the audio for the project. You can listen to the audio without CORS problems (http://williamgreen.hopto.org/audioVisualization/song.mp3). However, the audio visualization program requires access to read the sound frequencies. When I try to read the audio frequencies, I am given this error:

MediaElementAudioSource outputs zeroes due to CORS access restrictions for http://williamgreen.hopto.org/audioVisualization/song.mp3

The frequencies return as 0s.

When I add this line:

audio.crossOrigin = 'anonymous';

I no longer receive the error but the audio doesn't load.

I have also tried setting CORS access with this header in .htaccess according to https://stackoverflow.com/a/11691776/3011082 . This question also seems interesting but lacks the information I need (MediaElementAudioSource outputs zeros due to CORS access restrictions local mp3 file). I also referenced this (http://enable-cors.org/server_apache.html).

Any suggestions? Are there any apache/PHP headers that need to be set? How can I get this working?

I had asked this question a while back (How can I set CORS access for an audio file on my Linux webserver with apache2?) but I wasn't as accurate as I would like and the answers didn't help me which is why I asked this question. My brain has been working this puzzle for literally months aside from high school ;)

Edit: I asked this question which reveals more information. The issue is very likely with the CORS headers CORS headers for accessing a file on another domain

Community
  • 1
  • 1
www139
  • 4,960
  • 3
  • 31
  • 56

1 Answers1

7

I eventually figured out what to do after hours and hours of research and experimenting. There is very little documentation, as of this writing, available online showing how to do this. I hope people will find this helpful.

Understanding CORS:

CORS is an acronym for Cross Origin Resoruce Sharing. CORS is a new standard for sharing/accessing information between different domains. CORS basically is a method of using server headers to tell the browser if it is permitted to access or interact with a specific file on another server. While you can load most things without worrying about CORS (like images, audio, videos, and even other web pages), interaction with these elements requires special permission from the server. In my case, I was attempting to read frequencies from an audio file on another server. In this instance, I was attempting to access information which required authorization from special headers on the server.

Browser support is very good but, if you are supporting older browsers, you may want to see support tables here (http://caniuse.com/#search=cors)

What I did:

  • Enabled the use of .htaccess (I think you can accomplish the same thing with apache2.conf or 000-default.conf but .htaccess files are much easier to edit and maintain). These files are used to set headers and settings for apache. I enabled the use of .htaccess files by going to /etc/apache2/ and edited apache2.conf. Make sure your <Directory /var/www/> entry matches the following:

    <Directory /var/www/> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory>

  • I set the headers in my .htaccess file to allow access from Codepen. Create a .htaccess file in the same directory as the file you want to share. You only want to share what you have to or you might create a security risk. Type this in your .htaccess file: Header set Access-Control-Allow-Origin: "http://websiteWantingToAccessYourFile.com". Save your file.

  • Restart Apache with this command sudo service apache2 restart. Enter your password if prompted.

  • With the audio, I added the crossorigin="anonymous" attribute. You can read more about CORS settings (crossorigin) here (https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) I imagine you can set this with ajax and xhr requests.

Different versions of apache may have different file names or standards. Check to make sure this is correct for your version. I am running Apache 2.4.18 on my Ubuntu server.

Please tell me if this can be improved. I have spent a lot of time understanding this but I am not an expert. Post your suggestions in the comments. :)

www139
  • 4,960
  • 3
  • 31
  • 56