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>
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.
The question is how to provide data to <audio>
tag behave correctly on all required browsers (ff, safari, chrome, IE9+).
Problems
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
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.
Note I am looking for solution for other connected problem in How to play .m4a with HTML5 audio in IE(9+) and Safari (Pad)?