Verwenden von HTML5 Audio mit Formularauthentifizierung in SAFARI

Question

Ich habe eine ASP.NET MVC3 App mit Formularauthentifizierung und es funktioniert seit einiger Zeit gut. Ich bin dabei, HTML5-Audio-Tags auszuprobieren, bei denen das src-Attribut der Audiodateien, ob MP3 oder OGG, auf eine MVC3-GET-Aktion verweist, die eine GUID-ID für einige Audioinhalte akzeptiert. Die Aktionsmethode gibt ein FileStreamResult zurück und ermöglicht das Abspielen von Audio in MSIE9 (mp3), FireFox 9+ (oga) und Chrome 18 (oga). In Safari 5.1.4 wird das MP3, das es unterstützen soll, nicht abgespielt.

Weitere Untersuchung zeigt, dass die Anfrage an die Aktionsmethode im Falle von Safari nicht authentifiziert ist und so nach Überprüfung der Anfrage Header kann ich sehen, dass der .aspxauth Cookie nicht auf der Anfrage ist. Andere Aktionslinks, die vor und nach dem Versuch des Audio-Tags bei seiner Anfrage ausgewählt wurden, senden alle den ASPXAUTH-Cookie.

Gibt es eine Möglichkeit, Safari zum Senden der Authentifizierungscookies zu zwingen? Ich möchte darauf hinweisen, dass die Deaktivierung der Genehmigung für diese Aktion keine Option ist.

Ich habe dies in der letzten Safari 5.1.5 versucht, ohne Glück.

Answer 1

Ich bin selbst auf dieses Problem gestoßen und habe die folgende Problemumgehung gefunden. Es verwendet eine XMLHttpRequest, die die Cookies verwendet, um eine Base64-codierte Version der Datei zu greifen.

var mediaElem = document.getElementById("media"); 

/* 
safari doesn't pass cookies with audio tag. User agent sniffing is not a good way 
to handle detection, but I am not sure what feature to sniff in this case, since 
currentSrc appears to be set as long as the response status is 200 OK 
*/ 
if(navigator.userAgent.toLowerCase().indexOf("chrome") < 0 && 
    navigator.userAgent.toLowerCase().indexOf("safari") >= 0) 
{ 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.open("GET", "mediaFile.base64"); 
    xmlhttp.onreadystatechange = function() 
    { 
     //DONE readystate 
     if(xmlhttp.readystate = 4) 
     { 
      mediaElem.src = "data:audio/mpeg;base64," + xmlhttp.responseText; 
     } 
    } 
    xmlhttp.send(); 
} 

Dann alles, was Sie brauchen, ist Ihr Audio-Tag irgendwo in Ihrem HTML.

<audio id="media"> 
    <source src="mediaFile.mp3" /> 
    <source src="mediaFile.ogg" /> 
    Fallback statement... 
</audio>