MediaElementAudioSource prints zeros due to CORS access restrictions

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>

The audio API gives the MediaElementAudioSource the output of zeros due to CORS access restrictions , because I'm trying to play the SHOUTcast URL. I do not know what to do; I tried all the solutions on the Internet, but nothing worked. Any help would be appreciated.

The URL works fine with the audio element, so it does not concern the URL; I even tried something like http://subdomain.domain.org:port/file.mp3. And I found people using Icecast on the Internet who .ogghave the same problem. How to fix it?

Answer 1

In my answer, I will assume the following setting:

• URL http://stream.radio.com:8000/mount ( http://stream.radio.com:8000/;stream/1 Shoutcast)
• URL- URL-, URL- HTML/JS-, http://radio.com/player

, :

• "Access-Control-Allow-Origin" *
• javascript audio tag crossOrigin "" audio.crossOrigin="anonymous";
• - URL .

Icecast "Access-Control-Allow-Origin" , 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 , :

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: *" .

Shoutcast

, Shoutcast HTTP- (.htaccess ), - -, - radio.com. - Nginx Apache.

Nginx

"proxy_set_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 .

Answer 2

HTTP-. - webapp . , htaccess PHP.

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

Answer 3

SHOUTcast CORS. , , SHOUTcast.

Answer 4

, MediaElementAudioSource "CrossOrigin".

: MediaElementAudioSource - CORS . , . , , : http://www.codingforums.com/javascript-programming/342454-audio-api-js.html

createMediaElementSource , MediaElementAudioSourceNode. Cross-Origin (CORS) Web Audio API. ( , W3C.) , , CORS , " "; , .

, http://morebassradio.no-ip.org:8214/;stream/1 Access-Control-Allow-Origin ( ), * . , , , , . , Ctrl + Shift + Q Firefox, "", , HTTP- "".

, - , , , HTML-; HTML XHTML-.

( Firefox, ( "" ) (Ctrl + Shift + K). Firefox CORS, Chrome, . , , , , Content (CSP), , Firefox .)

/ crossorigin crossorigin = "use-credentials" (JavaScript) crossorigin = "use-credentials" (HTML) -, , , , HTML , "" .

API -, MediaElementAudioSourceNode . createMediaElementSource HTMLMediaElement (HTMLAudioElement), MediaElementAudioSourceNode instanceof, , , .

Then in my situation, I get the HTTP response header:

HTTP/1.1 206 Partial Content
Date: Thu, 02 Jun 2016 06:50:43 GMT
Content-Type: audio/mpeg
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: X-Log, X-Reqid
Access-Control-Max-Age: 2592000
Content-Disposition: inline; filename="653ab5685893b4bf.mp3"
Content-Transfer-Encoding: binary
Last-Modified: Mon, 16 May 2016 02:00:05 GMT
Server: nginx
Cache-Control: public, max-age=31536000
ETag: "FpGQqtcf_s2Ce8W_4Mv6ZqSVkVTK"
X-Log: mc.g;IO:2/304
X-Reqid: 71cAAFQgUBiJMVQU
X-Qiniu-Zone: 0
Content-Range: bytes 0-1219327/1219328
Content-Length: 1219328
Age: 1
X-Via: 1.1 xinxiazai211:88 (Cdn Cache Server V2.0), 1.1 hn13:8 (Cdn Cache Server V2.0)
Connection: keep-alive

Please note that "Access-Control-Allow-Origin: *", I think this is correct, but I still get the message. Hope this helps you.