k1sina / ngtunes

:musical_note: The Community Angular 2 Music Player. :musical_note:

ngTunes

ngTunes is a music player application built with Angular 2. Users can search Spotify for tracks to customize a playlist to sample their favorite tunes. Users can also tweet about what they're listening to as well as see what others are enjoying via a live tweet stream.

Listen to music now!

Contribute!

Want to make ngTunes better? Submit a Pull Request. Take a look at the TODO List for ideas on what to play around with.

Contributions will be reviewed by a core community team and end up on the live audio player at angulartunes.com.

TODO List

• Plug/play visualizers (NathanWalker#1)
• Allow playlists to be shared via AngularFire2 integration (NathanWalker#2)
• Make playlist loop through all tracks instead of repeat the same one over and over (NathanWalker#3)
• Create a NativeScript app of the player (NathanWalker#4)
• Allow more customizations to visualizers (NathanWalker#5)
• Create standalone plugin widget of just the Spotify search (NathanWalker#6)
• Integrate Webpack for the production build (NathanWalker#7)
• Fix bug with removing tracks (NathanWalker#8)

Overview

A mashup of many technologies were used to bring this experience to users. The project was scaffolded up using the angular CLI and utilized to build the application. The visualization engine is a port of audiograph which was brought in as it's own angular 2 component. The music catalog takes advantage of Spotify's API for searching and track playback. Twitter's API was used for both the ability to retrieve related tweets via live stream and for posting to the user's timeline if they choose to share. (Add screenshot info if we get that working too)

Credits and libs used:

• Angular CLI
• angulartics2
• @ngrx/store
• pusher-js
• three.js
• audiograph.xyz
• Infowrap
  • productivity tool to keep everyone on same page
  • Files area contains animated gifs of some progress along the way
• angular2-color-picker
• Spotify web api
• Twitter api
• Font Awesome
• hint.css
• Bootstrap

Angular Attack 2016 submission. View Original Entry.

The founding team:

• The dreamer - Nathan Walker (@wwwalkerrun)
• The work horse - James Churchill (@SmashDev)
• The energy - Sean Larkin (@TheLarkInn)
• The other guy - Mike Brocchi (@brocco)

License

MIT