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

Question

如果我使用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 标记: <audio id="jp_audio_0" preload="metadata" src="http://localhost:6060/Music/StreamUploadedSongs/1"></audio>

音乐 Controller :

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 标记:<audio id="jp_audio_0" preload="metadata" src="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"></audio>

我在其他页面上还有其他 jPlayers，它们也完全相同。

编辑:刚刚尝试过:

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

       return filePath; 
    }

我将 mp3 文件放在该目录中，但现在根本无法播放。如果我将其粘贴到网址 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，您会发现您的方式有效，但 google chrome 则不然。 HTML5 音频也会发生这种情况。

由于默认的ASP不支持，需要手动添加。这就是为什么它在使用 URL 链接时有效，而不是在从数据库中选择时有效。

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