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

Posted 2023-03-04

【中文标题】由于 CORS 访问限制，MediaElementAudioSource 输出零

【英文标题】：MediaElementAudioSource outputs zeroes due to CORS access restrictions

【发布时间】：2015-09-14 00:41:38

【问题描述】：

<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 的人也有同样的问题。如何解决这个问题？

【问题讨论】：

我在使用我正在试验的一支笔时遇到了 codepen.io 这个问题。有什么建议吗？

对不起，我想投票，我点击了向下按钮，所以不会让我改变它..

【参考方案1】：

这是一个 HTTP 标头。您将配置您的网络服务器或网络应用程序以发送此标头。也许在 htaccess 或 php 中。删除下面的行

    <header name = "Access-Control-Allow-Origin" value = "*" />

【讨论】：

所以我把

如果需要使用您使用的任何服务器语言配置您的标头。大多数服务器都允许使用 php，因此您可以尝试： 我已经试过了 我对 cors 不太熟悉，但现在您请求的站点（称为站点 b）必须发送：Access-Control-Allow-Origin as先。因此，仅设置您自己的标题将无济于事。您需要联系网站管理员，看看他们是否会发送该邮件。我相信当你在本地工作时，自己设置是件好事 我是该网站的管理员.. 网络 (apache) 和同一个 linux 服务器上的直播。但是如果我有访问权限，我该如何解决？【参考方案2】：