CODEWITHSUNDEEP
javascriptnode.jshtmlaudioserver-side
Rolands Laucis
Rolands Laucis

Reputation: 18

Saving and loading data in a node.js server and passing it to an html5 file

So I'm very new to node.js and javascript, and i made a server that works great by loading up an html file on request. This html file does not contain any of it's own data, it simply sources from the internet and displays some images and text i wrote. I've decided to make the site play an audio file when it is opened. I know this is done easily with the <audio> tag in html5 but the src="" lets me take a file from the computer and place it there, of course when i open the site from another computer the file obviously isn't found and thus isn't played. I figure the audio file must be kept as a variable on the server and passed into the html file's <audio src= > tag. How do i do this? It is an .mp3(but i can get it to any other audio format) file about 30 seconds long. I just want it to play when the site is loaded from another computer(over the internet). Also how would i go about doing the same with pictures or any other data that i don't want to source from the internet but rather keep as data in my server?

var http = require('http');
var fs = require('fs');

var simpleServer = http.createServer(function(request, response){
    response.writeHead(200, {"Content-Type":"text/html"});
    fs.readFile('./Picture.html', null, function(error, data){
        if(error){
            response.writeHead(404);
        } else{
            response.write(data);
        }
        response.end();
    })
});

simpleServer.listen(80, '0.0.0.0', function() {
    console.log('Listening to port:  ' + 80);
});

console.log("Server running...");

Upvotes: 0

Views: 2982

Answers (1)

Jamie
Jamie

Reputation: 230

Short Answer

Bypassing using HTML altogether, you can also simply serve the audio file instead of Picture.html:

fs.readFile("./audiofile.mp3", function(error, data) {
    if (error) {
        response.writeHead(404);
    } else {
        response.writeHead(200, { "Content-Type": "audio/mpeg"});
        response.end(data, 'utf-8');
    }
});

Note: You will have to replace the filename audiofile.mp3 and the content type audio/mpeg to their appropriate values for the file you want to send.

Check Mozilla's Complete List of MIME Types for a full list of file extensions and their associated content types.

Better Answer:

The http module is fairly low-level and is unnecessarily complicated if you're learning.

You can install express.js to your project using the command npm install express --save.

With express your code simplifies to:

const express = require('express');
const app = express();
const port = 80;

app.get('/', (request, response) => {
  response.sendFile(__dirname + '/Picture.html');
});

// Anything put in the public folder is available to the world!
app.use(express.static(__dirname + '/public'));

app.listen(port, () => {
  console.log(`Listening on port: ${port}`)
});

Then you just have to place all your files into a folder called "public" under your project directory and you can call them from HTML!

Upvotes: 2

Related Questions