MediaElementAudioSource Ausgänge Nullen wegen CORS Zugriffsbeschränkungen

<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>

Audio-API gibt MediaElementAudioSource Ausgänge Nullen wegen CORS Zugriffsbeschränkungen weil ich versuche zu spielen, einen SHOUTcast-URL. Ich weiß nicht, was zu tun ist; ich habe versucht, alle Lösungen auf dem internet, aber nichts funktionierte. Jede Hilfe wird geschätzt.

Die URL funktioniert perfekt mit dem audio-element, also nicht über die URL; ich habe sogar versucht, so etwas wie http://subdomain.domain.org:port/file.mp3. Und ich fand im internet Leute mit Icecast, die .ogg habe das gleiche problem. Wie man dieses Problem beheben?

Ich bin mit diesem problem mit codepen.io mit einem Stift, ich bin mit dem Experimentieren. Irgendwelche Vorschläge?
sorry, ich wollte upvote und ich klickte die Schaltfläche unten, und SO wird nicht lassen Sie mich ändern..

InformationsquelleAutor user1531557 | 2015-06-26

8

In meiner Antwort gehe ich davon aus das folgende setup:
- Ihre stream-URL ist http://stream.radio.com:8000/mount (oder http://stream.radio.com:8000/;stream/1 für Shoutcast)
- Ihr paget URL, wo Sie platzieren Sie Ihre HTML - /JS-code-URL http://radio.com/player
Damit dies funktioniert müssen Sie:
1. Stellen Sie die "Access-Control-Allow-Origin" - header von deinem Strom, die an Ihre domain oder *
2. In javascript, set audio tag crossOrigin - Eigenschaft auf "anonyme" audio.crossOrigin="anonymous";
3. Eine weitere option verschieben Sie die stream-URL auf die original-domain mit dem reverse-proxy.
Mit Icecast Sie die Katze, legen Sie die "Access-Control-Allow-Origin" - header mithilfe des Konfigurations-Datei, fügen Sie einfach die folgenden Zeilen in Ihre icecast.xml ich in der Regel fügen Sie direkt nach der öffnung <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>
```
Vergessen Sie nicht, neu zu starten, Icecast nach diesen änderungen. Wenn Ihr Icecast wird wieder online sein, können Sie überprüfen die Header mit diesem Befehl:
```
lynx -head -dump http://stream.radio.com:8000/mount 
```
Antwort sollte in etwa so Aussehen:
```
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
```
Wie Sie sehen können, "Access-Control-Allow-Origin: *" - header vorhanden ist.

Shoutcast

Leider Shoutcast nicht erlauben das setzen von HTTP-Headern (.htaccess ist nicht eine option, auch), aber wir können erstellen Sie eine reverse proxy-web-server-Konfiguration, wird diese ermöglichen es Ihnen, zu-host-stream aus dem Haupt-domain - radio.com. Ich werde die proxy-Konfigurationen für Nginx und Apache.

Nginx

Können Sie zusätzliche Header mit "proxy_set_header", aber das grundlegende Beispiel ist:
```
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

Aktivieren, Apache proxy Module und update radio.com virtual-host-Konfiguration-Konfiguration:
```
<VirtualHost *:80>
   ServerName radio.com
   ....
   ProxyPass /stream http://stream.radio.com:8000/mount
</VirtualHost>
```
Nun können Sie auf Ihre stream mit http://radio.com/stream URL und die CORS-Richtlinie nicht gelten. Diese Lösung bringt auch einige zusätzliche Vorteile:
- können Sie konvertieren Sie Ihre http, Shoutcast/Icecast stream zu https, damit die Browser beschweren sich nicht über den Zugriff auf unsichere Inhalte, wenn Sie das einbetten der stream auf der Seite die mit https. (Icecast unterstützt die SSL-Konfiguration selbst)
- 8000 port ersetzt werden, mit port 80, damit die Zuhörer mit 8000 port hinter der firewall den Zugriff auf deinen stream.
InformationsquelleAutor Alex Paramonov
1

Dass ein HTTP-header. Konfigurieren Sie Ihren webserver und webapp senden dieses headers. Vielleicht in der htaccess oder PHP. entfernen Sie die folgende Zeile
```
    <header name = "Access-Control-Allow-Origin" value = "*" />
```
- also legte ich <strike><header name = "Access-Control-Allow-Origin" value = "*" /></scrike> in .htaccess-Datei im gleichen Verzeichnis, in meinem code? das ist, was u bedeuten?
- Wenn nötig, konfigurieren Sie Ihren header mit einem beliebigen server Sprache Ihrer Verwendung. Die meisten Server erlauben php, so können Sie versuchen: <?php header("Access-Control-Allow-Origin: example.com"); ?> stellen Sie sicher, es ist keine html-bevor diese Zeile, oder es wird scheitern
- ich habe dies bereits versucht <?php header("Access-Control-Allow-Origin: subdomain.domain.org:port/;stream/1"); ?> aber hat nicht funktioniert.
- Ich bin nicht allzu vertraut mit cors, aber es macht Sinn für mich jetzt, dass die Website, die Sie gerade angefordert von (nennen wir es b-site) zu senden: Access-Control-Allow-Origin als ein Kopf. So ist lediglich Ihre eigenen Header nichts zu tun. Kontaktieren Sie den administrator der Website, um zu sehen, ob Sie es senden. Ich glaube, die Einstellung Ihrer eigenen ist gut, wenn Sie lokal arbeiten
- ich bin der admin der Seite.. die web - (apache) und shoutcast auf dem selben linux server. aber wie kann ich das beheben, wenn ich den Zugang haben?
InformationsquelleAutor Bill Pope
1

SHOUTcast-Servern nicht unterstützt CORS. Es gibt nichts, was Sie tun können, um dies zu ändern, wenn Sie gehen, um weiter zu SHOUTcast.
- ich Tat etwas, aber nicht das Gefühl Recht. ich machte einen proxy-Skript im gleichen Verzeichnis, in der die Spieler und spielte dieses Skript
- Ja, das ist der einzige Weg, wenn Sie SHOUTcast verwenden. Es ist eine gängige Methode. Ich habe tatsächlich meine eigene streaming-Server für diesen Zweck. Schießen Sie mir eine e-mail an [email protected] wenn Sie möchten, es zu versuchen. Ich arbeite beim Start eines hosting-service später in diesem Jahr, aber es läuft jetzt in einer begrenzten Kapazität.
InformationsquelleAutor Brad
1

Zunächst MediaElementAudioSource nicht über eine Eigenschaft mit dem Namen "crossOrigin".

Find ich nur dieses problem, und wütend mit den Nachricht:MediaElementAudioSource Ausgänge Nullen wegen CORS Zugriffsbeschränkungen für. Aber es ist nur eine Nachricht, ich kann es immer noch hören Sie die audio.
Und ich googelte viel, denke dieser link hilfreich sein:http://www.codingforums.com/javascript-programming/342454-audio-api-js.html

Den createMediaElementSource Methode soll ein Objekt erstellen, verwendet die MediaElementAudioSourceNode-Schnittstelle. Diese Objekte unterliegen der Cross-Origin Resource Sharing (CORS) Einschränkungen basierend auf dem letzten Entwurf der Web Audio API spec. (Beachten Sie, dass diese Einschränkung erscheint nicht in den veralteten W3C-version des spec.) Nach den spec, Stille abgespielt werden soll, wenn CORS Einschränkungen blockieren Sie den Zugriff auf eine Ressource, die erklären, die "Ausgänge null" angezeigt; vermutlich null ist äquivalent zu kein Ton.

Heben die Beschränkung der Anbieter der Seite, auf
http://morebassradio.no-ip.org:8214/;stream/1 hätte konfigurieren müssen
Ihre server für die Ausgabe von Access-Control-Allow-Origin-header mit
entweder eine Liste von domains (auch bei Euch) oder der * Wert, es aufzuheben
für alle domains. Da dieser Strom scheint bereits
uneingeschränkte, öffentliche Inhalte, vielleicht können Sie davon zu überzeugen die Besitzer
die Ausgabe, die den header. Sie können testen, ob der header gesendet wird
durch drücken von Strg+Shift+F in Firefox öffnen Sie das Netzwerk-panel laden
der stream über die Adresse-Leiste und dann mit der Inspektion der Header
Zusammenhang mit, dass die HTTP-Anfrage in das Netzwerk".

Beachten Sie, dass Sie nicht verwenden können, ein meta-element, da der audio-stream
ist, natürlich, nicht ein HTML-Dokument; das Verfahren funktioniert nur für
HTML-und XHTML-Dokumente.

(Während Sie Herumspielen mit Firefox panels, möchten Sie vielleicht, um sicherzustellen,
Sicherheits-Fehler und Warnungen aktiviert sind (indem Sie die Sicherheit
- Taste oder den Pfeil) in die Konsole (Strg+Shift+K). Ich bin mir nicht sicher
wenn eine entsprechende CORS Meldung in Firefox wie in Chrome, aber
es könnte sein. Ich Verschwendete eine Menge Zeit Fragen, warum eine Seite nicht
die Arbeit eines Tages, die bei der Fehlersuche eine ähnliche Technologie, Content
Security Policy (CSP), nur um festzustellen, dass ich die relevanten Firefox
Nachrichten ausgeblendet.)

Sollten Sie nicht brauchen, um Durcheinander mit den crossorigin Eigenschaft/Attribut
es sei denn, Sie crossorigin = "verwenden-Anmeldeinformationen" (JavaScript) oder
crossorigin="verwenden-Anmeldeinformationen" (HTML), irgendwo, aber wahrscheinlich
nicht, weil das Teil der HTML-Spezifikation nicht abgeschlossen, doch
und es würde mit ziemlicher Sicherheit dazu führen, Ihre Inhalte zu "brechen" nach
seit Anmeldeinformationen erforderlich wäre, an diesem Punkt.

Ich bin nicht vertraut mit der Web Audio API, so war ich nicht in der Lage, Abbildung
aus, wie die Ausgabe einer MediaElementAudioSourceNode und trigger ein Fehler
Nachricht für meine eigene Fehlersuche. Wenn ich createMediaElementSource
mit einem HTMLMediaElement (HTMLAudioElement), das Ergebnis scheint nicht
ein MediaElementAudioSourceNode basierend auf Tests mit der
instanceof-operator, obwohl die spec sagt es sein sollte, wenn ich bin
Lesen Sie es richtig.

Dann in meiner situation, ich bekomme die HTTP-Header der Antwort:
```
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
```
Beachten Sie, dass "Access-Control-Allow-Origin: *" ich denke, dass dies genau das richtige, aber ich bekomme die Meldung immer noch. Hoffe es hilft Ihnen.

InformationsquelleAutor Sincoyw

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.