jPlayer歌曲不正确加载使用MVC方法 [英] jPlayer songs not loading correctly using MVC method

问题描述

如果我用 MP3：/音乐/ StreamUploadedSongs / 1在以下code：

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

下面是什么样子，你可以看到jplayer未正确移动时代（它们重叠），也是谋求/播放栏不工作，虽然这首歌仍然可以打出：的

Here is what it looks like, you can see jplayer isn't moving the times correctly (they are overlapping) and also the seek/play bar doesn't work although the song can still be played:

HTML标记：
＆LT;音频ID =jp_audio_0preLOAD =元数据SRC =HTTP：//本地主机：6060 /音乐/ StreamUploadedSongs / 1＆GT;＆LT; /音频＆GT;

音乐控制器：

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\"那么完美。

If i change the mp3 property to this instead: mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" then it works perfectly.

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已经转移时间的正确位置：的

Here is what it looks like, working properly, the seek/play bar works and jplayer has moved the time to the correct positions:

HTML标记：＆LT;音频ID =jp_audio_0preLOAD =元数据SRC =htt​​p://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man .MP3＆GT;＆LT; /音频＆GT;

我在其他页面的其他jPlayers和它完全相同的与他们了。

I have other jPlayers on other pages and its the exact same with them too.

修改：只是尝试这样做：

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

       return filePath; 
    }

我把该目录中的MP3文件的，但它不玩，现在在所有。如果我粘贴到URL这的http：//本地主机：6060 /音乐/ StreamUploadedSongs / 1034它只是返回I：\\ Users \\用户名\\桌面\\ MusicSite \\ MusicSite \\ MusicSite的\\内容\\ TSP-01-Cro_magnon_man.mp3，而不是演奏的乐曲。

I put the mp3 file in that directory but it doesn't play at all now. If I paste this into 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 the song.

推荐答案

下面的问题是，谷歌Chrome和iPad（我想？）需要的内容范围请求支持。您正在加载整首歌曲，你需要加载它的一部分。如果加载mozzila火狐你看到你的方式工作，但谷歌浏览器没有。这也恰好与HTML5音频。

Here is problem, Google chrome and Ipad (i think?) require support for content-range requests. You are loading entire song, you need to load parts of it. If you load mozzila firefox you see your way works but google chrome it doesn't. This also happens with HTML5 audio.

由于默认ASP不支持它，你必须手动添加。这就是为什么它使用URL链接时，并没有从数据库中选择工作时

As default ASP doesn't support it, you have to add it manually. That's why it works when using URL link and not when selecting from 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);
    }

这篇关于jPlayer歌曲不正确加载使用MVC方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！