由于 CORS 访问限制，MediaElementAudioSource 输出零 [英] MediaElementAudioSource outputs zeroes due to CORS access restrictions
问题描述
<script>
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'http://subdomain.domain.org:port/;stream/1';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
audio.crossorigin="anonymous";
// 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 (window.AudioContext || window.webkitAudioContext)(); // AudioContext object instance // 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.crossOrigin = 'anonymous'
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(){
(requestAnimationFrame || webkitRequestAnimationFrame)(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);//get frequency
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);
}
}
</script>
由于 CORS 访问限制，音频 API 使 MediaElementAudioSource 输出为零，因为我正在尝试播放 SHOUTcast URL.我不知道该怎么办;我已经尝试了互联网上的所有解决方案，但没有任何效果.任何帮助将不胜感激.
Audio API gives MediaElementAudioSource outputs zeroes due to CORS access restrictions because I'm trying to play a SHOUTcast URL. I don't know what to do; I have tried all solutions on the internet but nothing worked. Any help will be appreciated.
URL 与音频元素完美配合，因此与 URL 无关；我什至尝试过类似 http://subdomain.domain.org:port/file.mp3 的东西.我在互联网上发现使用 Icecast .ogg 的人也有同样的问题.如何解决这个问题?
The URL works perfectly with audio element so its not about the URL; I have even tried something like http://subdomain.domain.org:port/file.mp3. And I found on the internet people using Icecast which is .ogg have same problem. How to fix this?
推荐答案
在我的回复中，我将假设以下设置:
In my response I will assume the following setup:
- 您的直播网址是 http://stream.radio.com:8000/mount(或 http://stream.radio.com:8000/;stream/1 用于 Shoutcast)
- 用于放置 HTML/JS 代码 URL 的 paget URL 是 http://radio.com/player
- Your stream URL is http://stream.radio.com:8000/mount (or http://stream.radio.com:8000/;stream/1 for Shoutcast)
- Your paget URL where you place your HTML/JS code URL is http://radio.com/player
要使其正常工作，您需要:
To get this working you need:
- 将流的Access-Control-Allow-Origin"标头设置为您的域或
* - 在javascript中，将
audio标签crossOrigin属性设置为anonymous"audio.crossOrigin="anonymous"; - 另一个选项是使用反向代理将您的流 URL 移动到原始域.
- Set the "Access-Control-Allow-Origin" header of your stream to your domain or
* - In javascript, set
audiotagcrossOriginproperty to "anonymous"audio.crossOrigin="anonymous"; - Another option it to move you stream URL to the original domain using reverse proxy.
使用Icecast，您可以使用配置文件设置Access-Control-Allow-Origin"标头，只需将以下几行添加到您的icecast.xml 中，我通常在打开后立即添加它们<代码>
With Icecast you cat set the "Access-Control-Allow-Origin" header using configuration file, just add the following lines to your icecast.xml, I usually add them right after the opening <icecast> tag:
<http-headers>
<header name="Access-Control-Allow-Origin" value="*" />
<header name="Access-Control-Allow-Headers" value="Origin, Accept, X-Requested-With, Content-Type, If-Modified-Since" />
<header name="Access-Control-Allow-Methods" value="GET, OPTIONS, HEAD" />
</http-headers>
不要忘记在这些更改后重新启动 Icecast.当您的 Icecast 重新上线时，您可以使用以下命令检查标题:
Don't forget to restart Icecast after these changes. When your Icecast will be back online you can check the headers with this command:
lynx -head -dump http://stream.radio.com:8000/mount
响应应如下所示:
Server: Icecast 2.4.2
....
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, Accept, X-Requested-With, Content-Type, If
-Modified-Since
Access-Control-Allow-Methods: GET, OPTIONS, HEAD
如您所见，存在Access-Control-Allow-Origin: *"标头.
As you can see, "Access-Control-Allow-Origin: *" header is present.
喊话
不幸的是，Shoutcast 不允许您设置 HTTP 标头(.htaccess 也不是一个选项)，但我们可以在 Web 服务器配置中创建反向代理，这将允许您托管来自主域的流 - <代码>radio.com.我将提供 Nginx 和 Apache 的代理配置.
Unfortunately, Shoutcast does not allow you to set HTTP headers (.htaccess is not an option too), but we can create a reverse proxy in web server configuration, this will allow you to host the stream from the main domain - radio.com. I will provide proxy configurations for Nginx and Apache.
Nginx
您可以使用proxy_set_header"添加其他标题，但基本示例是:
You can add additional headers with "proxy_set_header", but the basic example is:
server {
listen 80;
server_name radio.com;
....
location /stream {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_pass http://stream.radio.com:8000/mount;
}
....
}
阿帕奇
激活 Apache 代理模块，并更新 radio.com 虚拟主机配置配置:
Activate Apache proxy modules, and update radio.com virtual host configuration configuration:
<VirtualHost *:80>
ServerName radio.com
....
ProxyPass /stream http://stream.radio.com:8000/mount
</VirtualHost>
现在您可以使用 http://radio.com/stream URL 和 CORS 政策访问您的流将不适用.此解决方案还带来了一些额外的好处:
Now you can access your stream using http://radio.com/stream URL and the CORS policy will not apply. This solution also brings some additional perks:
- 您可以将您的 http Shoutcast/Icecast 流转换为 https，因此当您将流嵌入到使用 https 托管的页面时，浏览器不会抱怨访问不安全的内容.(Icecast 本身支持 SSL 配置)
- 8000 端口将替换为 80 端口，这将允许具有 8000 端口在防火墙后面的侦听器访问您的流.
这篇关于由于 CORS 访问限制，MediaElementAudioSource 输出零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
