2013-11-24 7 views
12

Ich benutze die WebAudio API mit new Audio() Objekt als Quelle. Das Folgende ist eine vereinfachte Version von dem, was ich tue. Dies spielt jedoch keine Sounds in Firefox 25.0.1.Firefox WebAudio createMediaElementSource funktioniert nicht

var context; 
if(window.webkitAudioContext) { 
    context = new webkitAudioContext(); 
} else { 
    context = new AudioContext(); 
} 
var audio = new Audio(); 

// This file does seem to have CORS Header 
audio.src = "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"; 

var source; 
function onCanPlay() { 
    console.log("can play called"); 
    source = context.createMediaElementSource(audio); 
    source.connect(context.destination); 
    audio.removeEventListener("canplay", onCanPlay); 
    audio.play(); 
} 

if(audio.readyState < 3) { 
    audio.addEventListener("canplay", onCanPlay); 
} else { 
    onCanPlay(); 
} 

jsFiddle: http://jsfiddle.net/7bJUU/

las ich in einem anderen question dass createMediaElementSource CORS erfordert. Die Datei im obigen Beispiel scheint zu haben, funktioniert aber immer noch nicht in Firefox. Wenn ich das gleiche Beispiel lokal mit einer lokalen Audiodatei abspiele, funktioniert alles einwandfrei.

Ich bin mir nicht sicher, ob das ein Fehler ist oder ob ich etwas schrecklich falsch mache. Jede Hilfe wird geschätzt.

+0

Dieses wie ein Firefox Bug mir aussieht. CORS-Header sind definitiv da, und der Code ist korrekt. –

+0

Das sieht wie ein Fehler aus https://bugzilla.mozilla.org/show_bug.cgi?id=937718 – z33m

+0

Hmm. Nun, ich denke, Sie können AJAX wahrscheinlich als Notlösung verwenden, da die OGG-Datei einen CORS-Header hat. Viel Glück. –

Antwort

3

Hier ist der Grund:

  1. Firefox (getestet vor und nach dem Update auf 41.0.1 ab Oktober 07, 2015) eine Ausgabe mit unsecure Quer Domänen auf Secure-Socket HTTP zu haben scheint. Ich habe auf https: auf Medienquelle aktualisiert, da Wikimedia alternativ 443 TCP mit einem gültigen Zertifikat für "Wikimedia Foundation, Inc." hat. vom 23. Juni 2015 bis zum 19. Februar 2017 von CA "GlobalSign". In einer sicheren Domäne benötigen Browser auch sichere Ressourcen.
  2. Das Audio-DOM-Element und andere Elemente wie Bild und Video haben die Eigenschaft "crossOrigin", die angibt, ob Anmeldeinformationen (Cookies) angegeben werden sollen oder nicht. Die anonyme Herkunft gibt an, dass kein Domain-Cookie an die Domain-übergreifend weitergegeben wird, was vom Browser als sicher angesehen wird. Also stelle ich "audio.crossOrigin" auf "anonymous", bevor ich die Quelle des Audios anwähle.

Getestet habe ich auf Firefox (wie auf den ersten Punkt gesagt) und Chrome 45.0.2454.101m, und sie hat gut funktioniert, und ich auf JSFiddle so aktualisiert: https://jsfiddle.net/7bJUU/11/7bJUU

+0

Nur eine Anmerkung für andere, dass Sie auch das 'crossorigin' Attribut auf dem Audioelement direkt wie' 'verwenden können. –