MVC audio controls playing song from bytes - asp.net-mvc

Question

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 src=#item.SongBytes type="audio/mp3"/>
</audio>
}

Answer 1

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

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

Answer 3

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.