jPlayer songs not loading correctly 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 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 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 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        
    }

});

Here is what it looks like, working properly, the seek/play bar works and jplayer has 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 and its the exact same with them too.

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 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.

I think its expecting the **path** of the file stored in server and it seems from your controller you are returning a `File`. — Guruprasad J Rao, Aug 19 '15 at 04:16
You need to return simple string containing file path and not the audio file. Is it showing any error on console? — Akshay, Aug 19 '15 at 10:21
@GuruprasadRao I have the songs stored in mySql database. Song bytes, Song name etc. So how would I return the path? — sitBy, Aug 19 '15 at 15:22
I thought that might be it, but then I just tried it, see edit in original post — sitBy, Aug 19 '15 at 15:39
Just check what you are getting in `filepath` and compare with actual path!! — Guruprasad J Rao, Aug 19 '15 at 18:02
@sitBy Did you have any luck resolving this? Did you try my answer below? — hutchonoid, Aug 24 '15 at 16:01
Ye, thanks for trying but it didn't help. I am going to hire a developer to help me fix it because it's driving me nuts. You're code isn't wrong by any means, but it just doesn't fix my problem. — sitBy, Aug 24 '15 at 16:17
@sitby Hope u get sorted, I can't see anything else obvious. — hutchonoid, Aug 24 '15 at 18:13

Martin Dawson · Answer 1 · 2015-09-03T13:42:29.983

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.

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

score 0 · Answer 2 · answered Aug 20 '15 at 11:41

As you have your songs in a database I have assumed you will want to create and return a File.

If this is not the case let me know and I can add a file path method instead.

I had to adapt your client code slightly:

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>

Simply wrapped a doc ready and deleted an 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 had to specify the MIME type, if I left it as "audio/*" the browser simply downloaded the file rather than playing it.

You can test this yourself by directly navigating to the controller action, wiht a mime type specified it will display the default player rather than downloading the file.

I'd suggest reading the mime type from your song instead, rather than hardcoding the way I have i.e.

public ActionResult StreamUploadedSongs(int id)
{
    byte[] song = db.UploadedSongs.Where(x => x.Id == id).FirstOrDefault().SongBytes;

    return File(song, "audio/" + song.MimeType);
}

jPlayer songs not loading correctly using MVC method

2 Answers2

Linked