3

I want to play a sound file on the client side whenever the space bar is pushed.

The client side successfully emits the 'bang' event when the space bar is pressed: 

$(window).keydown(function(event){
    alert(event.keyCode);
if (event.keyCode == 32){
        socket.emit('bang'); 
}
});

The server side succesfully prints "bang" in the control.log so hopefully it is also emitting 'play':

io.on('connection', function(socket){
  socket.on('bang', function(){
    console.log('bang');
    io.emit('play');
  });
});

However, back on the client side to play the sound, nothing is happening. The code I am using is:

var sound = new Audio('/public/audio/1.mp3');   

socket.on('play', function () {
    sound.play();   
});

Do I need to include something in the body to do with audio or a in order to use the Audio object.

I have searched this quite thoroughly but I am very new to node.js, html and socket.io. I tried the advice given here: Play Audio from client when message is recieved from socket.io - node.js

But when I put in:

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

'static' became flagged and upon trying to run the code I recieved an error message: 'express is not defined, even though I put it before:

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

as advised in that post. I also tried it after and got the same error.

Please help me.

Community
  • 1
  • 1
user2784462
  • 47
  • 1
  • 4
  • Why is Socket.io involved in this at all? – laggingreflex Feb 08 '15 at 14:10
  • I want to create a web application where users can interact in real time by tapping the space bar to make sounds. I was advised to use socket in order to keep the communication close to instantaneous. – user2784462 Feb 08 '15 at 18:12
  • Try `var sound = new Audio('/audio/1.mp3');` – laggingreflex Feb 08 '15 at 18:16
  • I tried this, and also: var sound = new Audio('1.mp3'); with the 1.mp3 file in the main the folder, but neither one worked. – user2784462 Feb 08 '15 at 18:53
  • Where's exactly your `1.mp3` file located? – laggingreflex Feb 08 '15 at 19:21
  • The folder containing the project is called "new2", there is one copy in new2/public/audio and now there is also one copy in new2 (not in anysubfolders) alongside index.js and index.html – user2784462 Feb 08 '15 at 19:26
  • You say you get the error `'express is not defined`. Do you have `var express = require('express')` in your code? – laggingreflex Feb 08 '15 at 19:32
  • Also try `app.use('/public', express.static('/public'));` – laggingreflex Feb 08 '15 at 19:32
  • yes, I do have var express = require('express'). I only get that error message when I try to include: app.use('/public', express.static('/path/to/public')); – user2784462 Feb 08 '15 at 19:37
  • I also am recieving the 'express not defined' error message while using ` app.use('/public', express.static('/public'));' the static part gets highlighted and goes red in my text editor – user2784462 Feb 08 '15 at 19:42
  • Post the errors and/or screenshots, and possibly include all the code that leads up to the point of `app.use('/public'` – laggingreflex Feb 08 '15 at 19:49
  • Ok - doing this now. (Will upload as soon as it's done.) Thank you for helping me! – user2784462 Feb 08 '15 at 19:57
  • Sorry for the delay. My code was very messy. Here are all the screenshots: https://imgur.com/a/N066I – user2784462 Feb 08 '15 at 21:32
  • You have `var app=require('express')();` Change it to `var express=require('express'); var app=express();` – laggingreflex Feb 08 '15 at 22:07
  • I changed it, and have tried the new configuration with `app.use('/public', express.static('/path/to/public'));' and `app.use('/public', express.static('/public'));' - the 'static' in both of them still gets highlighted in red but there is no error message, but still no sound. I also tried it with neither of them and still recieved the same result. – user2784462 Feb 08 '15 at 22:18
  • Could you show the updated screenshots of the errors? – laggingreflex Feb 08 '15 at 22:22
  • I am not getting any error messages now that I changed it to: `var express=require('express'); var app=express();` I have managed to make sound happen using a src=url for the audio - shown here: https://imgur.com/6yWa2zW, however, the sound does not play when the spacebar is pressed, it simply continuously loops it (even though `loop="false"`) – user2784462 Feb 08 '15 at 22:34
  • Using a url instead of a file is not ideal though as the whole point of using socket.io was to eliminate webpage loading lag. However, I do not know enough about this stuff to know whether a dropbox url would actually cause such a lag. – user2784462 Feb 08 '15 at 22:38
  • Are you using `var sound = new Audio('/audio/1.mp3');`? – laggingreflex Feb 08 '15 at 22:49
  • Your questions are being split into two now: 1. `/audio/1.mp3` is not accessible. And 2. lag in playing the audio. It'd be better to tackle the second issue in a separate question, possibly after solving the first one first. Are you able to access `http:///audio/1.mp3`? – laggingreflex Feb 08 '15 at 22:54
  • That one did not work. The only way I have gotten sound to happen(albeit not in the correct way) has been from using ` – user2784462 Feb 08 '15 at 22:57
  • How about `http:///public/audio/1.mp3`? – laggingreflex Feb 08 '15 at 23:00
  • Ah - just saw your most recent comment. Agreed. When I type in http://localhost:3000/audio/1.mp3 into the browser, I get a blank screen with the message: 'Cannot GET /audio/1.mp3' – user2784462 Feb 08 '15 at 23:02
  • How about http://localhost:3000/public/audio/1.mp3 – laggingreflex Feb 08 '15 at 23:07
  • This also does not work. I also tried localhost:3000/1.mp3, and I also copied the /audio folder directly into the project folder to see if that did anything, but it didn't. – user2784462 Feb 08 '15 at 23:14
  • Try `app.use(express.static('public'));` Try to follow the [guide](http://expressjs.com/guide/using-middleware.html) to see if you're doing anything different. The tutorial you seem to be following is quite old, Express changed a lot between versions 3 and 4, now you simply do `app.listen()` instead of using the `http` module. Perhaps some incompatibilities are arising due to mixing old and new styles. – laggingreflex Feb 09 '15 at 00:02
  • Sorry this was a while ago. I eventually solved the issue but using: app.use(express.static(__dirname + '/public')); – user2784462 Jul 14 '15 at 19:49
  • I just wanted to say thank you so much for spending so much time helping me. I can imagine it being quite unsatisfying since we didn't get to a resolution but I really appreciated all the help and time you put in. Thank you. – user2784462 Jul 14 '15 at 19:52

0 Answers0