14

I have created a simple server that uses the fs module to stream an mp3 file to a browser which plays it in an html5 audio element. As it is, the audio streams perfectly fine, however, I can't seek through the stream, even if the part I seek to has already been buffered.

var express = require('express');
var app = express();
var fs = require('fs');

app.get('/', function (req, res) {
    var filePath = 'music.mp3';
    var stat = fs.statSync(filePath);

    res.writeHead(200, {
        'Content-Type': 'audio/mpeg',
        'Content-Length': stat.size,
    });

    var readStream = fs.createReadStream(filePath);
    readStream.pipe(res);
});

Other similar Q&As have suggested to add the Content-Range header, but I can't find a simple example of how to do that. Others have said to use the 206 Partial-Content header, but when I do that the audio won't play at all.

Here's a demo (testing on chrome on windows)

Alex Wohlbruck
  • 1,340
  • 2
  • 25
  • 41

1 Answers1

23

Adjusted code from one of the unaccepted answer in this question:

var express = require('express'),
    fs = require('fs'),
    app = express()

app.get('/', function (req, res) {
    var filePath = 'music.mp3';
    var stat = fs.statSync(filePath);
    var total = stat.size;
    if (req.headers.range) {
        var range = req.headers.range;
        var parts = range.replace(/bytes=/, "").split("-");
        var partialstart = parts[0];
        var partialend = parts[1];

        var start = parseInt(partialstart, 10);
        var end = partialend ? parseInt(partialend, 10) : total-1;
        var chunksize = (end-start)+1;
        var readStream = fs.createReadStream(filePath, {start: start, end: end});
        res.writeHead(206, {
            'Content-Range': 'bytes ' + start + '-' + end + '/' + total,
            'Accept-Ranges': 'bytes', 'Content-Length': chunksize,
            'Content-Type': 'audio/mpeg'
        });
        readStream.pipe(res);
     } else {
        res.writeHead(200, { 'Content-Length': total, 'Content-Type': 'audio/mpeg' });
        fs.createReadStream(filePath).pipe(res);
     }
});
Yohanes Gultom
  • 3,782
  • 2
  • 25
  • 38
  • Wow... it's kind of impressive that it works by itself just like that! Is the seek precise though? Like to the second? – jayarjo Oct 23 '19 at 14:41
  • I mean how do you know what byte range has to be requested for a given second? – jayarjo Oct 23 '19 at 14:45
  • I guess it's handled by the media player. Assuming the metadata provides (at least) the total file length (byte) and total playback duration (second), I think you can easily calculate the bytes of given seconds. Eg. for 100 kb 10s file, the 7th s = 7/10*100kb = 70kb – Yohanes Gultom Oct 23 '19 at 23:58
  • No, it's much more complicated (at least in the case of mp3) and since I won't be streaming over HTTP, I suspect that I will have to replicate that logic myself. – jayarjo Oct 24 '19 at 05:16
  • Turns out you are right. According to answer here, the easiest way is using ffprobe (from ffmpeg) https://stackoverflow.com/questions/37134341/web-video-bytes-range-to-time – Yohanes Gultom Oct 25 '19 at 06:22