JPlayer songs load incorrectly using MVC method

Question

If I use mp3: "/Music/StreamUploadedSongs/1" in the following code:

 var player = new $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: "/Music/StreamUploadedSongs/1", }); }, cssSelectorAncestor: "#jp_container_1", swfPath: "~Scripts/Jplayer/jquery.jplayer.swf", useStateClassSkin: true, autoBlur: false, keyEnabled: true } }); 

Here's what it looks like: you can see that jplayer is not moving the time correctly (they overlap), and also the search / playback panel does not work, although the song can still play:

Html Markup: <audio id="jp_audio_0" preload="metadata" src="http://localhost:6060/Music/StreamUploadedSongs/1"></audio>

Music Controller:

 public ActionResult StreamUploadedSongs(int id) { byte[] song = db.UploadedSongs.Where(x => x.Id == id).FirstOrDefault().SongBytes; return File(song, "audio/*"); } 

If instead change the mp3: mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" property mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" , then it works great.

 var player = new $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", }); }, cssSelectorAncestor: "#jp_container_1", swfPath: "~Scripts/Jplayer/jquery.jplayer.swf", useStateClassSkin: true, autoBlur: false, keyEnabled: true } 

});

Here's what it looks like, working correctly, the arrow / playback bar works, and jplayer moved the time to the correct positions:

Html Markup: <audio id="jp_audio_0" preload="metadata" src="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"></audio>

I have other jPlayers on other pages as well as the same with them.

Edit : just tried this:

  public string StreamUploadedSongs(int id) { string filePath = Server.MapPath(Url.Content("~/Content/TSP-01-Cro_magnon_man.mp3")); return filePath; } 

I put the mp3 file in this directory, but now it does not play at all. If I paste this into the url http://localhost:6060/Music/StreamUploadedSongs/1034" , it just returns I: \ Users \ UserName \ Desktop \ MusicSite \ MusicSite \ MusicSite \ Content \ TSP-01-Cro_magnon_man.mp3 instead of playing songs.

Answer 1

Here's the problem: Google Chrome and iPad (I think?) Require support for content requests. You download the whole song, you need to download parts of it. If you download Mozzila firefox, you see that your method works, but Google Chrome doesn’t. This also happens with HTML5 audio.

By default, ASP does not support it, you must add it manually. That is why it works when using a URL link, and not when selecting from a database.

  public FileStreamResult StreamUploadedSongs(int id) { byte[] song = db.UploadedSongs.Where(x => x.Id == id).FirstOrDefault().SongBytes; long fSize = song.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-Accept", Response.ContentType); Response.AddHeader("Content-Length", desSize.ToString()); Response.AddHeader("Content-Range", string.Format("bytes {0}-{1}/{2}", startbyte, endbyte, fSize)); //Data var stream = new MemoryStream(song, (int)startbyte, (int)desSize); return new FileStreamResult(stream, Response.ContentType); } 

Answer 2

Since you have your songs in the database, I suggested that you want to create and return a file.

If not, let me know and I can add the file path.

I had to slightly adapt your client code:

View

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script> <script type="text/javascript"> $(function () { var player = new $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: "/Music/StreamUploadedSongs/1", }); }, cssSelectorAncestor: "#jp_container_1", swfPath: "~Scripts/Jplayer/jquery.jplayer.swf", useStateClassSkin: true, autoBlur: false, keyEnabled: true //} deleted this extra bracket }); }); </script> <div id="jquery_jplayer_1"></div> <div id="jp_container_1"> <a href="#" class="jp-play">Play</a> <a href="#" class="jp-pause">Pause</a> </div> 

Just wrap the document ready and remove the extra bracket.

controller

 public ActionResult StreamUploadedSongs(int id) { //byte[] song = db.UploadedSongs.Where(x => x.Id == id).FirstOrDefault().SongBytes; var song = System.IO.File.ReadAllBytes(@"C:\Foo.mp3"); return File(song, "audio/mp3"); } 

I needed to specify the MIME type, if I left it as "audio/*" , the browser just downloaded the file, rather than playing it.

You can check it yourself by directly going to the controller action, with the specified mime type it will display the default player, and not download the file.

I'd rather read the mime type from your song instead, rather than hardcoding like me. ie

 public ActionResult StreamUploadedSongs(int id) { byte[] song = db.UploadedSongs.Where(x => x.Id == id).FirstOrDefault().SongBytes; return File(song, "audio/" + song.MimeType); }