Joel
Joel

Reputation: 6183

Play audio through websocket

I'm building a chat and i want the user to recieve a sound-notification if there's a new message. Currently i'm sending along all of my files that the client will receive like this:

var http_files = {};
 [
    ["/jquery.min.js","application/javascript"],
    ["/css/main.css","text/css"],
    ["/resumesound.mp3","audio/mpeg"], <-- doesn't work
    ["/css/normalize.css","text/css"],
    ["/js/main.js","text/javascript"],
    ["/js/vendor/modernizr-2.6.2.min.js","text/javascript"],
    ["/chat-frontend.js","application/javascript"],
    ["/index.html","text/html"]
 ].forEach(function(fn){
     http_files[fn[0]]={
         content : fs.readFileSync('.'+fn[0]).toString(),
         contentType : fn[1]
     };
 });
var server = http.createServer(function(request, response) {
     // this doubles as a way to serve the files, and a connection for websocket to use
     var file = http_files[request.url];
     if (file) {
         response.writeHeader(200,{"content-type" : file.contentType});
         response.write(file.content);
         return response.end();
     }
     response.writeHeader(404,{"content-type" : "text/plain"});
     response.write("not found");
     return response.end();

 });

But for some reason, the audio isn't played and I'm presented with this in the console when the audio is trying to play.

DOMException: Failed to load because no supported source was found.

implementation:

var sound = '/resumesound.mp3';
var audio = new Audio(sound);
audio.play();

Upvotes: 0

Views: 1259

Answers (1)

Joel
Joel

Reputation: 6183

Since audio is binary and not plain text, i have to "un-stringify" my files before i send them away to the client.

Changing this line did the trick:

content : fs.readFileSync('.'+fn[0]).toString(),

To:

content : fs.readFileSync('.'+fn[0]),

Code:

var http_files = {};
 [
    ["/jquery.min.js","application/javascript"],
    ["/css/main.css","text/css"],
    ["/resumesound.mp3","audio/mpeg"],
    ["/css/normalize.css","text/css"],
    ["/js/main.js","text/javascript"],
    ["/js/vendor/modernizr-2.6.2.min.js","text/javascript"],
    ["/chat-frontend.js","application/javascript"],
    ["/index.html","text/html"]
 ].forEach(function(fn){
     http_files[fn[0]]={
         content : fs.readFileSync('.'+fn[0]).toString(),
         contentType : fn[1]
     };
 });

Upvotes: 1

Related Questions