如何在我的Linux网络服务器上用apache2设置音频文件的CORS访问？ [英] How can I set CORS access for an audio file on my Linux webserver with apache2?
问题描述
我想在codepen上创建一个音频可视化项目。我试着用OneDrive托管音频文件，但我收到CORS限制错误。现在，我又走了一步，创建了自己的网络服务器（ http://publicwebserverdemo.hopto.org ），其中我拥有托管的音频文件（ http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3 ）。我已经尝试了几组指令在互联网上实施CORS与.htaccess文件，但我没有运气这一点。
我在Ubuntu Mate 14.04上使用Apache（包含整个LAMP软件包）。
这里是一个复制的示例代码（我抓住了测试CORS从互联网上的某个地方的代码）。
打开你的web检查器控制台并通知CORS通知：
由于对http：//publicwebserverdemo.hopto的CORS访问限制，MediaElementAudioSource输出零。 org / publicAudio / audio.mp3
感谢您的帮助：）
div＃mp3_player {width：500px; height：60px;背景：＃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;背景：＃002D3C; float：left; }
< div id =mp3_player> < div id =audio_box>< / div> < canvas id =analyser_render>< / canvas>< / div>
我最终想出了在几个小时和几个小时的研究和实验后做什么。有很少的文档，在写这篇文章，可在线显示如何做到这一点。
CORS是一个Cross Origin Resoruce Sharing的缩写。 CORS是在不同域之间共享/访问信息的新标准。 CORS基本上是一种使用服务器头来告诉浏览器是否允许访问或与另一个服务器上的特定文件交互的方法。虽然您可以加载大部分内容，而不必担心CORS（如图片，音频，视频，甚至其他网页），与这些元素的交互需要服务器的特殊权限。在我的情况下，我试图从另一台服务器上的音频文件读取频率。
浏览器支持是非常好的，但是如果你支持旧的浏览器，你可能需要在此处查看支持表格（ http://caniuse.com/#search=cors ）
$ b
我做了什么：
启用了.htaccess的使用你可以用apache2.conf或者000-default.conf完成同样的事情，但是.htaccess文件更容易编辑和维护）。这些文件用于设置apache的头和设置。我通过转到/ etc / apache2 /和编辑apache2.conf启用了.htaccess文件的使用。确保您的条目符合以下条件：
< Directory / var / www /
选项索引FollowSymLinks
AllowOverride所有
需要所有授予
< / Directory>
我在我的.htaccess文件中设置了标题，允许从Codepen访问。在与要共享的文件相同的目录中创建.htaccess文件。您只想分享您拥有的内容，否则可能会产生安全风险。在您的.htaccess文件中输入：
头文件集Access-Control-Allow-Origin：http://websiteWantingToAccessYourFile.com code>。
保存文件。
使用此命令重新启动Apache sudo service apache2 restart。如果出现提示，请输入您的密码。
使用音频，我添加了 crossorigin =anonymous属性。您可以在此处详细了解CORS设置（crossorigin）（ https：//我想象你可以使用ajax和xhr请求设置这个。
不同版本的apache可能具有不同的文件名或标准。检查以确保此版本是否正确。我在我的Ubuntu服务器上运行Apache 2.4.18。
请告诉我这是否可以改进。我花了很多时间理解这个，但我不是一个专家。在评论中发布您的建议。 ：）
I am trying to create an audio visualization project on codepen. I tried hosting the audio file with OneDrive, but I was receiving CORS restriction errors. Now I have gone a step further and created my own web server (http://publicwebserverdemo.hopto.org) where I have the audio file hosted (http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3). I have tried several sets of instructions across the internet for implementing CORS with the .htaccess file but I haven't had any luck with that. How can I grant CORS access to codepen for the audio file?
I am using Apache (with the whole LAMP package) on Ubuntu Mate 14.04.
Here is a replication of the sample codepen (I grabbed the code for testing CORS from some place on the internet).
Open your web inspector console and notice the CORS notice:
MediaElementAudioSource outputs zeroes due to CORS access restrictions for http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3
Thank you for your help :)
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the 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 into the processing graph of the AudioContext
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the 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 the canvas
ctx.fillStyle = '#00CCFF'; // Color of the bars
bars = 100;
for (var i = 0; i < bars; i++) {
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i] / 2);
// fillRect( x, y, width, height ) // Explanation of the 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 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 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. :)
这篇关于如何在我的Linux网络服务器上用apache2设置音频文件的CORS访问？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
