javascript - How can I set CORS access for an audio file on my Linux webserver with apache2? -

i trying create audio visualization project on codepen. tried hosting audio file onedrive, receiving cors restriction errors. have gone step further , created own web server (http://publicwebserverdemo.hopto.org) have audio file hosted (http://publicwebserverdemo.hopto.org/publicaudio/audio.mp3). have tried several sets of instructions across internet implementing cors .htaccess file haven't had luck that. how can grant cors access codepen audio file?

i using apache (with whole lamp package) on ubuntu mate 14.04.

here replication of sample codepen (i grabbed code testing cors place on internet).

open web inspector console , notice cors notice:

mediaelementaudiosource outputs zeroes due cors access restrictions http://publicwebserverdemo.hopto.org/publicaudio/audio.mp3 

thank :)

// create new instance of audio object , adjust of properties  var audio = new audio();  audio.src = 'http://publicwebserverdemo.hopto.org/publicaudio/audio.mp3';  audio.controls = true;  audio.loop = true;  audio.autoplay = true;  // establish variables analyser use  var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;  // initialize mp3 player after page loads of html window  window.addeventlistener("load", initmp3player, false);  function initmp3player(){  	document.getelementbyid('audio_box').appendchild(audio);  	context = new webkitaudiocontext(); // audiocontext object instance  	analyser = context.createanalyser(); // analysernode method  	canvas = document.getelementbyid('analyser_render');  	ctx = canvas.getcontext('2d');  	// re-route audio playback processing graph of audiocontext  	source = context.createmediaelementsource(audio);   	source.connect(analyser);  	analyser.connect(context.destination);  	framelooper();  }  // framelooper() animates style of graphics wish audio frequency  // looping @ default frame rate browser provides(approx. 60 fps)  function framelooper(){  	window.webkitrequestanimationframe(framelooper);  	fbc_array = new uint8array(analyser.frequencybincount);  	analyser.getbytefrequencydata(fbc_array);  	ctx.clearrect(0, 0, canvas.width, canvas.height); // clear canvas  	ctx.fillstyle = '#00ccff'; // color of bars  	bars = 100;  	for (var = 0; < bars; i++) {  		bar_x = * 3;  		bar_width = 2;  		bar_height = -(fbc_array[i] / 2);  		//  fillrect( x, y, width, height ) // explanation of parameters below  		ctx.fillrect(bar_x, canvas.height, bar_width, bar_height);  	}  }

div#mp3_player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; }  div#mp3_player > div > audio{  width:500px; background:#000; float:left;  }  div#mp3_player > canvas{ width:500px; height:30px; background:#002d3c; float:left; }

<div id="mp3_player">    <div id="audio_box"></div>    <canvas id="analyser_render"></canvas>  </div>

i figured out after hours , hours of research , experimenting. there little documentation, of writing, available online showing how this. hope people find helpful.

understanding cors:

cors acronym cross origin resoruce sharing. cors new standard sharing/accessing information between different domains. cors method of using server headers tell browser if permitted access or interact specific file on server. while can load things without worrying cors (like images, audio, videos, , other web pages), interaction these elements requires special permission server. in case, attempting read frequencies audio file on server. in instance, attempting access information required authorization special headers on server.

browser support but, if supporting older browsers, may want see support tables here (http://caniuse.com/#search=cors)

what did:

enabled use of .htaccess (i think can accomplish same thing apache2.conf or 000-default.conf .htaccess files easier edit , maintain). these files used set headers , settings apache. enabled use of .htaccess files going /etc/apache2/ , edited apache2.conf. make sure entry matches following:

<directory /var/www/>         options indexes followsymlinks         allowoverride         require granted </directory> 

i set headers in .htaccess file allow access codepen. create .htaccess file in same directory file want share. want share have or might create security risk. type in .htaccess file:

header set access-control-allow-origin: "http://websitewantingtoaccessyourfile.com".

save file. restart apache command sudo service apache2 restart. enter password if prompted. audio, added crossorigin="anonymous" attribute. can read more cors settings (crossorigin) here (https://developer.mozilla.org/en-us/docs/web/html/cors_settings_attributes) imagine can set ajax , xhr requests. different versions of apache may have different file names or standards. check make sure correct version. running apache 2.4.18 on ubuntu server.

please tell me if can improved. have spent lot of time understanding not expert. post suggestions in comments. :)