Serving mp3 files in NodeJS for use in audio tag

Question

I'm having problems serving mp3 files in NodeJS.

var filestream = fs.createReadStream('file.mp3');
filestream.on('open', function() {
  var stats = fs.statSync('file.mp3');
  var fileSizeInBytes = stats["size"];
  response.writeHead(200, {
    'Content-Type': 'audio/mpeg',
    'Content-Length': fileSizeInBytes});
  filestream.pipe(response);
});

I am setting the content type of the files before they are served, and the content length.

When I have the file on the page, I can play the audio and get the content's duration and it's current time.

But I cannot set it's current time like I can when I am not using NodeJS to serve the mp3 file.

<audio id='player' src='file.mp3'></audio>
<script>
  var duration = player.duration; // 88 seconds
  var time = player.currentTime; // 0 seconds

  player.currentTime = 10;

  var time = player.currentTime; // 0 seconds
</script>

Just to reitterate - when opening this page from the directory (not using nodejs as a server) I can set the currentTime of the audio element. Why is this?
Thanks for your help.

Thanks levi, that certainly was the problem. I'll post an answer with the code specific to node. — Sam, Aug 19 '15 at 11:17

score 0 · Accepted Answer · answered Aug 01 '17 at 11:07

The solution was to add an "Accept-Ranges" header to each response, and modify responses to requests with "range" headers, reading the byte range from the header and serving that content with the HTTP/1.1 206 response code.

The byte header is of the format bytes=<start>-<end>, e.g. bytes=0-49

Here is my updated code:

var filestream = fs.createReadStream('file.mp3');
var range = request.headers.range.replace("bytes=", "").split('-');

filestream.on('open', function() {
  var stats = fs.statSync('file.mp3');
  var fileSizeInBytes = stats["size"];

  // If the start or end of the range is empty, replace with 0 or filesize respectively
  var bytes_start = range[0] ? parseInt(range[0], 10) : 0;
  var bytes_end = range[1] ? parseInt(range[1], 10) : fileSizeInBytes;

  var chunk_size = bytes_end - bytes_start;

  if (chunk_size == fileSizeInBytes) {
    // Serve the whole file as before
    response.writeHead(200, {
      "Accept-Ranges": "bytes",
      'Content-Type': 'audio/mpeg',
      'Content-Length': fileSizeInBytes});
    filestream.pipe(response);
  } else {
    // HTTP/1.1 206 is the partial content response code
    response.writeHead(206, {
      "Content-Range": "bytes " + bytes_start + "-" + bytes_end + "/" + fileSizeInBytes,
      "Accept-Ranges": "bytes",
      'Content-Type': 'audio/mpeg',
      'Content-Length': fileSizeInBytes
    });
    filestream.pipe(response.slice(bytes_start, bytes_end);
  }
});

This answer was partially inspired by a gist on github found here.

Serving mp3 files in NodeJS for use in audio tag

1 Answers1