HTML audio file error 404 when on server but not as html file - Node.js

Question

I have an HTML page with an tag that autoplays a song when the page is loaded (the song file is .mp3). When I open it as a file on my mac, it will play the song, however, when I run it with a node.js file with socket.io, it won't play at all.

Error message in console: "Failed to load resource: the server responded with a status of 404 (Not Found)"

HTML (without style tags)

<!doctype html>
<html>
    <head>
        <title>Lucas Chat</title>
    </head>
    <body>
        <div id="top">
            <h1>Welcome to the chat!</h1>
            <audio autoplay>
                <source src="onedance.ogg" type="audio/ogg">
            </audio>
            <br>
            <p>
                Enter in a nickname and a message to get started
            </p>
            <br>
            <p id="drop">
                Scroll up or down to view newer/older messages
            </p>
        </div>
        <ul id="messages"></ul>
        <form action="">
            <input id="u" autocomplete="off" placeholder="Nickname"/>
            <input id="m" autocomplete="off" placeholder="Message"/>
            <button>
                Send
            </button>
        </form>
        <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script>
            var socket = io();
            $('form').submit(function() {
                var username = "<span style='font-weight:600;color:#006cff;font-size:18px;'>" + $('#u').val() + "</span>";
                var message = "<span style='color:#000000;'>" + $('#m').val() + "</span>";
                if ($('#m').val() != '' && $('#u').val() != '') {
                    socket.emit('send message', {
                        msg : message,
                        user : username
                    });
                    $('#u').css("display", "none");
                    $('#m').css("width", "90%");
                    $("#u").css("box-shadow", "0px 0px 0px rgba(0, 0, 0, 0)");
                    $("#m").css("box-shadow", "0px 0px 0px rgba(0, 0, 0, 0)");
                    $('#m').val('');

                } else if ($('#u').val() === '' && $('#m').val() === '') {
                    $("#u").css("box-shadow", "0px 0px 15px #ff8989");
                    $("#m").css("box-shadow", "0px 0px 15px #ff8989");
                } else if ($('#u').val() === '' && $('#m').val() != '') {
                    $("#u").css("box-shadow", "0px 0px 15px #ff8989");
                    $("#m").css("box-shadow", "0px 0px 0px rgba(0, 0, 0, 0)");
                } else if ($('#m').val() === '' && $('#u').val() != '') {
                    $("#m").css("box-shadow", "0px 0px 15px #ff8989");
                    $("#u").css("box-shadow", "0px 0px 0px rgba(0, 0, 0, 0)");
                }
                return false;
            });
            socket.on('receive message', function(msg) {
                $('#messages').append($('<li>').html(msg));
            });
        </script>

    </body>
</html>

JS

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var peopleCount = 0;
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket) {
    peopleCount++;
    console.log('a user connected | connections: ' + peopleCount);
    socket.on('disconnect', function() {
        peopleCount--;
        console.log('a user disconnected | connections: ' + peopleCount);
    });
});
io.on('connection', function(socket) {
    socket.on('send message', function(data) {
        io.emit('receive message', data.user + ': ' + data.msg);
    });
});
http.listen(3000, function() {
    console.log('listening on *:3000');
});

Going by the error, it seems that you have onedance.ogg on your local system, but not on the server. Are you sure that the audio file exists on the server and at the location specified by the paths? — user2570380
– user2570380, Commented May 27, 2016 at 1:48

faster · Accepted Answer · 2016-05-29 00:31:32Z

1

I guess you are not serving static files yet. With express you need something like

app.use('/static', express.static('public'));

anywhere in your app.js

Your .ogg file needs to be in /static/.

edited May 29, 2016 at 0:31

answered May 27, 2016 at 8:30

faster

1515 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

faster Over a year ago

It should be anywhere in your app.js expressjs.com/en/starter/static-files.html

Collectives™ on Stack Overflow

HTML audio file error 404 when on server but not as html file - Node.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related