如何正确地为＆LT提供数据，音频＆GT ;? [英] How to properly provide data for <audio>?
问题描述
我服务于HTML5音频彻底.aspx页面中的二进制数据。该文件可以播放，但没有与搜索栏和Safari中（新iPad），Chrome和Firefox重放问题。结果
修改我已经简化了（希望不要太多）在code和完整的清单presented（页面文件名显然是play.aspx）。
I am serving binary data for HTML5 audio thorough .aspx page. The file can be played but there is a problem with SeekBar and replaying in Safari (iPad), Chrome and Firefox.
Edit I have simplified (hopefully not too much) the code and full listing is presented (page file name is obviously 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 和内容类型头提供的。两个＆LT;音频＆GT; 标签启用时，文件将直接或彻底的一个.aspx页面访问比较的行为。
So Content-Length and Content-Type headers are supplied. Two <audio> tags enable compare behavior when the file is accessed directly or thorough an .aspx page.
问题是如何提供数据，以＆LT;音频＆GT;正确标签的行为在所有需要的浏览器（FF，野生动物园，铬，IE9 + ）。
The question is how to provide data to <audio> tag behave correctly on all required browsers (ff, safari, chrome, IE9+).
问题
的 Safari浏览器（iPad版）：的当播放按钮是pressed播放声音，但有流......，而不是搜索栏和播放似乎永远和声音不能重播。结果
火狐（窗口）：的寻找栏显示，但显示时间的增加，直到最后和回放时，行为正确结果
铬（视窗）：的搜索栏正确的，但不能被重播结果。
的 IE10：的确定
Safari (iPad): When the play button is pressed the sound is played but there is "Streaming ..." instead of Seek Bar and playing seem to last forever and sound cannot be replayed.
Firefox(windows): Seek Bar is displayed but shows increasing time until the end and behaves correctly when replayed.
Chrome(windows): Seek bar correct but cannot be replayed.
IE10: OK
我已经发现，但没有回答类似的问题。从观察的另一个页面提琴手看来头接受-范围：字节和内容范围：字节0-8100780 / 8100781 可以提供帮助。但是提供了必要的功能，似乎是刚才试图太难了，所以我没有尝试。
I have found similar questions on but without an answer. From observing another page with fiddler it seems that header Accept-Ranges: bytes and Content-Range: bytes 0-8100780/8100781 can help. However provide necessary features seems to be too difficult as just an attempt so I did not try it.
注意
我要寻找一个在<一个其他连接问题的解决方案href=\"http://stackoverflow.com/questions/18269791/how-to-play-m4a-with-html5-audio-in-ie9-and-safari-pad\">How在IE（9+）和Safari浏览器玩的.m4a与HTML5音频（PAD）？
推荐答案
答案很简单：有必要处理浏览器范围请求。
Simple answer: It is necessary to handle a browser range request.
完整的故事
在比较Firefox和IIS之间提琴手捕获的沟通我注意到，用于直接连接响应状态是 206部分内容而间接链接 200 OK 。结果
所示的要求更仔细的分析了Firefox的要求范围：字节= 0 - 和iPad 范围：字节= 0-1 后来就范围：字节= 0，全尺寸（捕获流量从iOS设备）。结果
设置 Response.Status code = 206 足以糊弄的Firefox而不是Safari浏览器。但我知道的关键信息和休息很简单。有必要兑现范围要求中看到：SO：的 HTML5视频不会循环。如何做到这一点的解释我已在啊哈找到了！ ＃1 - ASP.NET ASHX视频流对HTML5影片。因此，新的code是（仅活跃的部分是presented休息是相同的答案）：
When comparing Fiddler captured communication between Firefox and IIS I have noticed that the response status for the direct link is 206 Partial Content while for the indirect link 200 OK.
More careful analysis of request shown that Firefox requests Range: bytes=0- and iPad Range: bytes=0-1 and later on Range: bytes=0-fullsize (Capture Traffic from iOS Device).
Setting Response.StatusCode = 206 was enough to fool Firefox but not Safari. But I have known the key information and rest was simple. It is necessary to honor the range request see: SO: HTML5 video will not loop. The explanation how to do it I have found in Aha! #1 – ASP.NET ASHX Video Streaming for HTML5 Video. So the new code is (only active part is presented rest is the same as in the answer):
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();
};
}
这可能是方便的添加其他的头文件（内容处置，接受-范围，访问控制允许来源），但用意是present解决方案尽可能简单。
It is probably convenient to add other headers (Content-Disposition, Accept-Ranges, Access-Control-Allow-Origin) but the intention was present solution as simple as possible.
课程采取：如果我没有被固定在＆LT;音频＆GT; ，也曾经找过＆LT;视频方式＆gt; ，我会找到解决方案更快地
Lesson taken: If I had not been fixed to <audio> and had looked also for <video>, I would have found the solution more quickly.
这篇关于如何正确地为＆LT提供数据，音频＆GT ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
