Using HTML5 Audio with forms authentication in SAFARI

Question

I have an ASP.NET MVC3 app with Forms authentication and it's been working fine for some time. I'm in the process of trying out html5 audio tags where the src attribute of the audio files, be they mp3 or ogg, points to an MVC3 GET action that accepts a guid id for some audio content. The action method returns a FileStreamResult and quite happily allows playing of the audio in MSIE9 (mp3), FireFox 9+ (oga) and Chrome 18 (oga). In Safari 5.1.4 the mp3 that it is supposed to support does not playout.

Further investigation shows that the request to the action method in the case of safari is unauthenticated and so upon checking the request headers I can see that the .aspxauth cookie is not on the request. Other action links selected before and after the audio tag's attempt at its request all send the .aspxauth cookie.

Is there a way to force safari to send the authentication cookies? I should point out that disabling authorization on this action is not an option.

I've since tried this in the latest Safari 5.1.5 with no luck.

user1598246 user1598246 · Accepted Answer · 2012-09-11T14:59:17

I ran into this issue myself and came up with the following workaround to the problem. It uses an XMLHttpRequest which does utilize the cookies in order to grab a Base64 encoded version of the file.

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();
}

Then all you need is your audio tag somewhere in your html.

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

Using HTML5 Audio with forms authentication in SAFARI

1 Answers