使用MVC方法无法正确加载jPlayer歌曲

如果我在下面的代码中使用mp3: "/Music/StreamUploadedSongs/1" ：

 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 } }); 

这就是它的样子，你可以看到jplayer没有正确地移动时间（它们是重叠的）并且搜索/播放栏也不起作用，尽管仍然可以播放歌曲：

Html标记：

音乐控制器：

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

如果我将mp3属性更改为： mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"然后它完美地工作。

 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 } 

}）;

这是它的样子，正常工作，搜索/播放栏工作，jplayer将时间移动到正确的位置：

Html标记：

我在其他页面上有其他jPlayers，它们也一样。

编辑 ：试过这个：

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

我将mp3文件放在该目录中，但现在根本不播放。 如果我将其粘贴到url http://localhost:6060/Music/StreamUploadedSongs/1034"它只返回I：\ Users \ UserName \ Desktop \ MusicSite \ MusicSite \ MusicSite \ Content \ TSP-01-Cro_magnon_man.mp3而不是播放这首歌曲。

Answer 1

这是问题，Google Chrome和Ipad（我认为？）需要支持内容范围请求。 你正在加载整首歌曲，你需要加载它的一部分。 如果你加载mozzila firefox，你会看到你的方式有效，但谷歌铬没有。 这也发生在HTML5音频上。

由于默认ASP不支持它，您必须手动添加它。 这就是为什么它在使用URL链接时起作用而不是从DB中选择时的原因。

  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

当你在数据库中有你的歌曲时，我假设你想要创建并返回一个文件。

如果不是这种情况，请告诉我，我可以添加文件路径方法。

我必须稍微修改你的客户端代码：

视图

    
 
 Play Pause  

只需将doc准备好并删除一个额外的括号。

调节器

 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"); } 

我必须指定MIME类型，如果我将其保留为"audio/*" ，浏览器只需下载文件而不是播放它。

您可以通过直接导航到控制器操作来自行测试，如果指定了mime类型，它将显示默认播放器而不是下载文件。

我建议你从你的歌曲中读取mime类型，而不是像我那样硬编码

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