jsbeats - Music Player Demo Project

Screenshot

Technology

• NodeJS
• ES6/ES2015
• Babel - es2015 & stage0 plugins
• Angular v1.x
• Express JS
• Sails.js (REST API)
• Browserify
• Angular Material (Google's Material Design)
• Gulp
• Jade - Jadeify
• Audio5

Note: React version in the works. Angular v2 after that.

Features

• [x] File upload sailsjs details
• [x] Add music form, title, artist, album, file
• [x] Queue/playlist, displays title, artist, album
• [x] Double-clicking in queue list plays selected song
• [x] When a song finishes playing, play next song in queue
• [x] Player status: current song title, artist, album, time elapsed, duration
• [x] Player interface: play, stop, previous, next, scrubber bar, should all actually function.
• [x] Actually playing audio.
• [x] Simple UI theme in CSS.
• [x] Persistence using REST API.
• [x] Dummy data loader (set to auto initialize data)

Run the Project

Develped & Tested on Debian 8

git clone https://github.com/justsml/angular-material-es6-example.git
cd angular-material-es6-example
npm install
npm run build
npm start

Then visit: http://localhost:1337/

Run with Docker

npm run docker-build
npm run docker-run

# Or to mount the local dev folder for live updating (no `docker build` needed for every change)
npm run docker-run-dev

Then visit: http://localhost:1337/

Schemas

• Media
  • Title
  • Artist
  • Album
  • AudioUrl
• Playlist
  • Title
  • Tracks[Media]

CREDIT & REFERENCES

• Exploring ES6 Patterns for Angular v1.0
• Angular & Material Design Info
• ES6 Module Info
• REST API built using SailsJS

Sample MP3 Files - Credits

• https://soundcloud.com/trapmusic/fuzzy-peach-by-brillz-minxx
• https://soundcloud.com/trapmusic/hydraulix-oski-lets-play
• https://soundcloud.com/dubpolice/subscape-shanghai