Geek Answers Handbook

Problems with submitting audio files through MVC3 | Using various HTML5 players

Recently, I ran into a problem that I seem to be unable to solve. I am creating a simple component for an application that plays audio files (mainly .mp3 and .wav), and after some testing the application seems to work fine in Chrome.

However, in IE9, which is the only major browser I am connected to, I seem to hit a brick wall while listening to my audio files.

Files are currently being requested using a controller action, as shown below:

public ActionResult PlayAudioFile(string id) { AudioFile af = FileAgent.GetAudioFile(id); try { //Grabs the file via a Provider Stream resultStream = StorageProvider[af.Provider].ReadFile(af.Location); resultStream.Position = 0; //Added several headers in attempts to resolve the issues Response.AppendHeader("Content-Disposition", "attachment; filename=audio.mp3"); Response.AppendHeader("Content-Length", resultStream.Length.ToString()); Response.AddHeader("Accept-Ranges", "bytes"); Response.Headers.Remove("Cache-Control"); Response.AddHeader("Content-Range","bytes 0-" + (resultStream.Length-1).ToString() + "/" + resultStream.Length.ToString()); //Returns the file and associated file type (from the Provider) return new FileStreamResult(resultStream, resultStream.ContentType); } catch { //Uh oh. Error } }

The above is great for Chrome and works on a variety of HTML5 players like jPlayer , audio.js and MediaElement . However, when a file is requested in approximately the following way (using jPlayer syntax):

 $(this).jPlayer("setMedia", { mp3: '@Url.Action("PlayAudioFile","Home")?id=D00023', });

or audio.js syntax:

 player.load('@Url.Action("PlayAudioFile","Home")?id=D00023');

and the associated audio tag audio.js:

 <audio preload="auto" crossorigin="use-credentials"></audio>

Which causes the correct action and returns a FileStreamResult, however, it seems that all players have difficulty decrypting the file and reading it correctly. I tried several players and ran into this problem in all of them.

Any suggestions are welcome. Thanks.

NOTES:

  • As mentioned in one of the comments, I tried to use several and many types of comments to solve this problem. None of them worked.

  • While exploring some of the possible causes of this problem, I noticed that removing the [Authorize] attribute fixed some problems with direct access to the file, but all players could not upload the file to IE9.

  • Now I am convinced that this may be a credential problem and that when I need to request a file via jPlayer or audio.js (or whatever you have), I need to enable the necessary credentials to allow it to access the file through the controller.

  • Trying to use $.ajax({ withCredentials: true}) and <audio crossorigin='use-credentials> . And without success.

PROCESSING INFORMATION:

Both requests (working in Chrome and non-functional in IE9) have the same headers:

 Cache-Control: public, max-age=3600, s-maxage=0 Date: [Current Date Time] Expires: [Current Date Time + max-age] Vary: * Content-Length: 77870 Content-Type: audio/mpeg Last-Modified: [Date] Accept-Ranges: bytes Content-Range: bytes 0-77869/77870 Server: Microsoft-IIS/7.5
+4
source share
2 answers

After deepening this problem, it became apparent that the problem was caused by encoding the .mp3 files themselves during the recording process. I decided to process them through Audacity, and after that they were recognized by IE9 (as well as other browsers).

0
source

Yes. Do not use audio as application/octet-stream (which indicates only common content), but as audio/mp3 , audio/wave or some other relevant contentType that matches the sound you are serving.

+7
source

More articles:


All Articles