How do I stream an mp3 file with express

Question

I am using gTTS module to convert text to .mp3 saving it temporarily. After saving I am try to stream the file but when I look at response object returned by the endpoint the arraybuffer looks empty.

const express = require('express')
    , router = express.Router()
    , bodyParser = require('body-parser')
    , gtts = require('node-gtts')('en')
    , path = require('path')
    , filePath = path.join(__dirname, 'temp', 'temp.mp3')
    , fs = require('fs')
    , ms = require('mediaserver')
router.use(bodyParser.urlencoded({
    extended: true
}));
router.use(bodyParser.json());

router.get('/speech', function(req, res) {
    console.log("query", req.query.text);
    saveFile(req.query.text,req.query.lang)
    .then(response => {
        console.log('looking for file', filePath)
        fs.exists(filePath, (exists) => {
            if (exists) {
                // console.log('going to stream');
                // ms.pipe(req, res, filePath);
                // console.log("findigh");
                const stat = fs.statSync(filePath)
                const fileSize = stat.size
                const range = req.headers.range
                console.log('size ', fileSize);
                if (range) {
                    const parts = range.replace(/bytes=/, "").split("-")
                    const start = parseInt(parts[0], 10)
                    const end = parts[1] ? parseInt(parts[1], 10) : fileSize-1
                    const chunksize = (end-start)+1
                    const file = fs.createReadStream(path, {start, end})
                    const head = {
                        'Content-Range': `bytes ${start}-${end}/${fileSize}`,
                        'Accept-Ranges': 'bytes',
                        'Content-Length': chunksize,
                        'Content-Type': 'audio/mp3',
                    }
                    res.writeHead(206, head);
                    file.pipe(res);
                }  else {
                    const head = {
                        'Content-Length': fileSize,
                        'Content-Type': 'audio/mp3',
                    }
                    res.writeHead(200, head)
                    fs.createReadStream(filePath).pipe(res)
                }
            } else {
                console.log('file not found');
                res.send('Error - 404');
                res.end();
            }
        })
    })
    .catch(err => {
        console.log('error in saving file' ,err);
    });
});

const saveFile = (text, language) => {
    return new Promise((resolve, reject) => {
        gtts.save(filePath, text, function() {
            console.log('create file')
            resolve("done");
        })
    });
}
module.exports = router`

The fetch call looks like this:

fetch(`/speech?lang=en&text=${translationBody.value}`, {
  method:'GET',
  headers: new Headers({'content-type': 'application/json'})
})
  .then(res => res)
  .then(res => console.log(res))
  .catch(err => console.log('err', err))

Is there something wrong in the endpoint or should I change my fetch call?

Does this answer your question? https://stackoverflow.com/questions/49524238/stream-mp3-file-express-server-with-ability-to-fast-forward-rewind — Cody Ｇ, Nov 27 '18 at 14:36
Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) that reproduces the problem. — Daan, Nov 27 '18 at 14:40
@CodyG. what would the fetch request will be like if we go by the example provided in that link? How the response should be handled? — Wayne_oBrien, Nov 27 '18 at 14:44
"fetch request" ? Do you mean what the client is requesting? "How the response should be handled" --- It's handled by express? — Cody Ｇ, Nov 27 '18 at 14:54
How should the client handle the response sent by the endpoint? — Wayne_oBrien, Nov 27 '18 at 14:57
What's your client... and what are you trying to do with it? — Cody Ｇ, Nov 27 '18 at 14:59
The client will call the endpoint with some text. After getting the text, the endpoint will pipe out a response. So how should the client handle this response which is being piped out. — Wayne_oBrien, Nov 27 '18 at 15:01
Depends? Do you want the entire stream as a single file or do you want to consume it as a stream? https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams#Consuming_a_fetch_as_a_stream — Cody Ｇ, Nov 27 '18 at 15:03
Also I'm pretty sure express automatically streams files . . when you use `res.sendFile()`. And why are you setting the headers on your 'GET' as application/json? — Cody Ｇ, Nov 27 '18 at 15:04
Eventually I want the endpoint to be POST handler rather than GET — Wayne_oBrien, Nov 27 '18 at 15:06
docs on streamed responses - https://blog.soshace.com/en/2016/10/27/node-lessons-writable-res-stream/ if still not work try some reading... — Robert Rowntree, Nov 27 '18 at 16:33

score 1 · Answer 1 · answered Nov 27 '18 at 14:34

1

Yes, you do need a bit of extra footwork here, setting a couple of headers. Sample code would look like this:

const http = require('http');
const fileSystem = require('fs');
const path = require('path');

http.createServer(function(request, response) {
  const filePath = path.join(__dirname, 'file.mp3');
  const stat = fileSystem.statSync(filePath);

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

  const readStream = fileSystem.createReadStream(filePath);
  readStream.pipe(response);
})
.listen(3000);

answered Nov 27 '18 at 14:34

Al Cher

336
3
11

4

this doesn't look like `express`. . . – Cody Ｇ Nov 27 '18 at 14:35
I did try it but it doesn't seem to work. This is the response I got after making a GET request to the endpoint responsible for streaming the audio. According to this, [https://medium.com/@bitshadow/play-audio-via-react-fetch-post-request-92a901d0bb7f] The reponse will get a body back which isn't so in my case. `Response { type: "basic", url: "http://localhost:3000/speech?lang=en&text=hi%20how%20are%20you?", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, bodyUsed: false }` – Wayne_oBrien Nov 27 '18 at 14:35

How do I stream an mp3 file with express

1 Answers1