Question

我正在通过.aspx页面为HTML5音频提供二进制数据。该文件可以播放，但SeekBar存在问题，并在Safari（iPad），Chrome和Firefox中重放编辑我已经简化了（希望不会太多）代码和完整列表（页面文件名显然是play.aspx）。

<%@ Page Language="C#"  %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
       if ( Request["filename"] != null)
       {
           string FilePath = MapPath(Request["filename"]);
           long fSize = (new System.IO.FileInfo(FilePath)).Length;
           //Headers
           Response.AddHeader("Content-Length",fSize.ToString());
           Response.ContentType = "audio/mp3";
           //Data
           Response.WriteFile(FilePath);
           Response.End();   
       };      
    }
</script>
<body>
    <p>Direct</p>
       <audio controls="controls" preload="none">
         <source src="sound.mp3" type="audio/mp3" />
      </audio>
      <p>Provided</p>
      <audio controls="controls" preload="none">
         <source src="play.aspx?filename=sound.mp3" type="audio/mp3" />
      </audio>
</body>
</html>

因此提供了Content-Length和Content-Type标头。当直接访问文件或通过.aspx页面访问文件时，两个<audio>标记启用比较行为。

问题是如何在所有必需的浏览器（ff，safari，chrome，IE9 +）上为<audio>标记提供正确行为的数据。

问题

Safari（iPad）：按下播放按钮时会播放声音，但有“Streaming ...”而不是Seek Bar，播放似乎永远持续，声音无法播放。
Firefox（Windows）：显示搜索栏，但显示结束时间增加，并在重播时表现正常。
Chrome（Windows）：搜索栏正确但无法重播 IE10：确定

我发现了类似的问题，但没有答案。通过使用fiddler观察另一个页面，标题Accept-Ranges: bytes和Content-Range: bytes 0-8100780/8100781似乎可以提供帮助。但是提供必要的功能似乎太难了，因为我只是尝试了，所以我没有尝试过。

注意我正在寻找How to play .m4a with HTML5 audio in IE(9+) and Safari (Pad)?

中其他相关问题的解决方案

Answer 1

简单回答：有必要处理浏览器range request。

完整故事

比较Firefox和IIS之间的Fiddler捕获的通信时，我注意到直接链接的响应状态为206 Partial Content，而间接链接200 OK的响应状态为Range: bytes=0-。
对请求进行更仔细的分析表明，Firefox请求Range: bytes=0-1和iPad Range: bytes=0-fullsize以及稍后Response.StatusCode = 206（Capture Traffic from iOS Device）。
设置range足以欺骗Firefox而不是Safari。但我知道关键信息和休息很简单。有必要遵守protected void Page_Load(object sender, EventArgs e) { if ( Request["filename"] != null) { string FilePath = MapPath(Request["filename"]); long fSize = (new System.IO.FileInfo(FilePath)).Length; long startbyte = 0; long endbyte=fSize-1; int statusCode =200; if ((Request.Headers["Range"] != null)) { //Get the actual byte range from the range header string, and set the starting byte. string[] range = Request.Headers["Range"].Split(new char[] { '=','-'}); startbyte = Convert.ToInt64(range[1]); if (range.Length >2 && range[2]!="") endbyte = Convert.ToInt64(range[2]); //If the start byte is not equal to zero, that means the user is requesting partial content. if (startbyte != 0 || endbyte != fSize - 1 || range.Length > 2 && range[2] == "") {statusCode = 206;}//Set the status code of the response to 206 (Partial Content) and add a content range header. } long desSize = endbyte - startbyte + 1; //Headers Response.StatusCode = statusCode; Response.ContentType = "audio/mp3"; Response.AddHeader("Content-Length",desSize.ToString()); Response.AddHeader("Content-Range", string.Format("bytes {0}-{1}/{2}", startbyte, endbyte , fSize)); //Data Response.WriteFile(FilePath,startbyte,desSize); Response.End(); }; }请求，请参阅：SO：HTML5 video will not loop。我在Aha! #1 – ASP.NET ASHX Video Streaming for HTML5 Video找到了解释如何做到这一点。所以新代码是（只有活动部分呈现休息与答案相同）：

Content-Disposition

添加其他标题（Accept-Ranges，Access-Control-Allow-Origin，<audio>可能很方便，但目的是尽可能简化解决方案。

课程：如果我没有修复<video>并且还查看了{{1}}，我会更快地找到解决方案。

如何正确提供<audio>？</audio>的数据

1 个答案: