justsml / angular-material-es6-example

Example Music Player App feat. Sails.js, ES6, Angular (v1.x), Jade, Gulp, Browserify, Babel, and Material Design

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

• File upload sailsjs details
• Add music form, title, artist, album, file
• Queue/playlist, displays title, artist, album
• Double-clicking in queue list plays selected song
• When a song finishes playing, play next song in queue
• Player status: current song title, artist, album, time elapsed, duration
• Player interface: play, stop, previous, next, scrubber bar, should all actually function.
• Actually playing audio.
• Simple UI theme in CSS.
• Persistence using REST API.
• 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