9

I have my songs stored in database as bytes[]. How do I use these in the <audio> tag.

So something like this. Do I need to convert the bytes to something else first? I am not sure.

foreach (var item in Model)
    {
        <audio controls>
            <source [email protected] type="audio/mp3"/>
        </audio>  
    }

3 Answers 3

13
+50

One way would be to add a new action in your controller that returns the data:

public ActionResult Audio(int someId)
{
    byte[] songBytes; 
    // Add code to get data
    return new FileStreamResult(songBytes, "audio/mp3");
}

Then put the URL to that into the src attribute:

foreach (var item in Model)
{
    <audio controls>
        <source src="/Controller/Audio/@item.someId" type="audio/mp3"/>
    </audio>  
}
2

Google chrome/Ipad require support for content-range requests, so to add to given answer here, do something like this:

 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);
    }
4
  • I believe you need range[2] != "" or else you can get a 206 with full range headers. Otherwise this helped me out a ton, thank you!
    – Jonathan
    Commented Oct 17, 2018 at 13:46
  • @Jonathan Glad it helped. I remember it being hard to find the solution. Commented Oct 17, 2018 at 13:56
  • One other change I'd recommend is to always send a 206, even when the range headers include the full file. At least in my experience this past week, Chrome <audio> will not allow seeking on a file that came back with a 200
    – Jonathan
    Commented Oct 22, 2018 at 14:24
  • Thanks, without this there is no way to seek audio back and forward. Commented Nov 1, 2023 at 10:33
0

It works for me, my issue is when I tried to play the .wav file via wavesurfer.js in chrome by calling controller method which return the ActionResult then file is playing but I was not able to seek, forward and backward. When I do seek, player returns to start position. Although this functionality is working fine in Firfox.

1
  • Thanks for the answer. can you add some sample code reference or link Commented Nov 14, 2019 at 6:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.