Clicking on the timeline of an audio element will restart the audio track. Why is that?

Question

JavaScript

Good day to all!
I have the following situation: an mp3 file is stored in the database. On the server side, I translate it into a byte array and pass it to the client:

public FileResult StreamTrack(int VoiceId)
{
        var file = repo.StreamTrack(VoiceId);
        return File(file.ToArray(), "audio/mpeg");
}

On the client side, the code looks something like this:

<audio controls preload="none" codecs="mp3">
    <source type="audio/mp3" src="/Home/StreamTrack?VoiceId=216">
</audio>

When you click on Play, the audio track plays normally. Controls such as Play and Pause also work without issue. BUT, when you try to poke in a certain place on the timeline, the audio track starts again. Moreover, if you specify the path to a physical mp3 file as the src attribute, then everything will work fine! Therefore, I somehow organized the return of the audio file from the server in a wrong way. Could you suggest how to be in such a situation?

Answer 1

The problem was solved by adding a header:
Total method is now like this:

public FileResult StreamTrack(int VoiceId)
{
        Response.AppendHeader("Accept-Ranges", "bytes");
        var file = repo.StreamTrack(Response, VoiceId);
        return File(file.ToArray(), "audio/mpeg");
}