ng-JukeBox - A Youtube Powered JukeBox built with AngularJS, nodejs and Socket.IO
JavaScript CSS CoffeeScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
config
spec-e2e
spec
tasks
vendor
.gitignore
.npmignore
.travis.yml
Gruntfile.js
Procfile
README.md
package.json
server.js

README.md

ng-JukeBox

A Youtube Powered JukeBox built with AngularJS, nodejs and Socket.IO

What is it?

It is a realtime web app that lets you play music from youtube on a host computer (a client that creates a room) and the features of the app such as adding to the playlist, rearranging the playlist, music controls such as play/pause and next are all controllable through guests (a client that joins a room). All the UI and data is updated in realtime for all clients connected their respective rooms thanks to WebSockets and SocketIO.

Features

  • Playlists (upcoming and archived videos)
  • Automatic play (as soon as the current video ends)
  • Rooms/Channels support. Host can create a room, and guests can join using a chosen key or random 4 character assigned.
  • Host and Guests are kept in sync in realtime.
  • Mobile first responsive design.
  • YouTube Mix support. The mix can be queued up if found for a song. Great for finding related music easily.

Screenshots

JukeBox

Demo

ng-JukeBox on Heroku

Credits

The initial work and insipiration came from @jgthms. You can see his AngularJS app here. Although my version has changed a lot both in functionality and design it is still an extension on his work.

Angular Mobile Frame is useful library that I have utilised. It is a set of directives for making mobile friendly apps.

Deployment

To make working with frontend frameworks easier and the eventual deployment I use limeman. What is even more nifty is that deploying to heroku (now that they support websockets - good timing!) is really easy, much easier than I first thought.

You simply make sure all the dependancies of lineman are present in your package.json and then add a postscript command in the file so that you can use lineman to build your angularjs app on heroku. More info here

  "scripts": {
    "postinstall": "lineman build"
  },