javascript - 由于 CORS 访问限制，MediaElementAudioSource 输出零

Question

<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。我不知道该怎么办;我已经尝试了互联网上的所有解决方案，但没有任何效果。任何帮助将不胜感激。

URL 与音频元素完美配合，因此它与 URL 无关；我什至尝试过像 http://subdomain.domain.org:port/file.mp3 这样的东西。我在互联网上发现使用 .ogg 的 Icecast 的人有同样的问题。如何解决这个问题？

Answer 1

在我的回复中，我将采用以下设置:

• 您的直播 URL 是 http://stream.radio.com:8000/mount(Shoutcast 是 http://stream.radio.com:8000/;stream/1)
• 放置 HTML/JS 代码 URL 的分页 URL 是 http://radio.com/player

要实现此功能，您需要:

1. 将流的“Access-Control-Allow-Origin” header 设置为您的域或 *
2. 在 javascript 中，将 audio 标记 crossOrigin 属性设置为“匿名”audio.crossOrigin="anonymous" ;
3. 另一种选择是使用反向代理将您的流 URL 移动到原始域。

使用Icecast，您可以使用配置文件设置“Access-Control-Allow-Origin” header ，只需将以下行添加到您的icecast.xml 中，我通常在打开<icecast> 后立即添加它们标签:

<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 重新联机时，您可以使用以下命令检查 header :

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: *” header 。

广播

不幸的是，Shoutcast 不允许您设置 HTTP header (.htaccess 也不是一个选项)，但我们可以在 Web 服务器配置中创建一个反向代理，这将允许您托管来自主域的流 - radio.com .我将为 Nginx 和 Apache 提供代理配置。

Nginx

您可以使用“proxy_set_header”添加额外的 header ，但基本示例是:

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

激活Apache代理模块，更新radio.com虚拟主机配置配置:

<VirtualHost *:80>
   ServerName radio.com
   ....
   ProxyPass /stream http://stream.radio.com:8000/mount
</VirtualHost>

现在您可以使用 http://radio.com/stream URL 访问您的流，CORS 政策将不适用。该解决方案还带来了一些额外的好处:

• 您可以将 http Shoutcast/Icecast 流转换为 https，这样当您将流嵌入到使用 https 托管的页面时，浏览器不会提示访问不安全的内容。 (Icecast 本身支持 SSL 配置)
• 8000 端口将替换为端口 80，这将允许在防火墙后具有 8000 端口的监听器访问您的流。