在 SAFARI 中使用带有表单身份验证的 HTML5 音频

Posted 2023-02-24

【中文标题】在 SAFARI 中使用带有表单身份验证的 HTML5 音频

【英文标题】：Using HTML5 Audio with forms authentication in SAFARI

【发布时间】：2012-04-06 04:44:31

【问题描述】：

我有一个带有表单身份验证的 ASP.NET MVC3 应用程序，它已经运行了一段时间。我正在尝试 html5 音频标签，其中音频文件的 src 属性（无论是 mp3 还是 ogg）指向一个 MVC3 GET 操作，该操作接受某些音频内容的 guid id。 action 方法返回一个 FileStreamResult 并且非常高兴地允许在 MSIE9 (mp3)、FireFox 9+ (oga) 和 Chrome 18 (oga) 中播放音频。在 Safari 5.1.4 中，它应该支持的 mp3 无法播放。

进一步调查表明，在 safari 的情况下对 action 方法的请求是未经身份验证的，因此在检查请求标头时，我可以看到 .aspxauth cookie 不在请求中。在音频标签尝试其请求之前和之后选择的其他操作链接都发送 .aspxauth cookie。

有没有办法强制 safari 发送身份验证 cookie？我应该指出，禁用此操作的授权不是一种选择。

我已经在最新的 Safari 5.1.5 中尝试过这个，但没有成功。

【参考方案1】：

我自己遇到了这个问题，并想出了以下解决方法。它使用一个 XMLHttpRequest，它利用 cookie 来获取文件的 Base64 编码版本。

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

那么你所需要的只是你的 html 中某处的音频标签。

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