Team Members

Launch Site

ngTunes

ngTunes is a music based application allowing users to search Spotify to customize a playlist to sample their favorite tunes written in Angular 2. The visualization uses audiograph (https://github.com/mattdesl/audiograph.xyz) by the incredibly talented Matt DesLauriers and was ported to make an API available for use with Angular 2. While listening and viewing their playlist users can also tweet about what they're rocking as well as see what others are enjoying.

V800 ngtunes

Description

A mashup of many technologies were used to bring this experience to users. The project was scaffolded up using the Angular CLI. The visualization engine uses audiograph which was brought in and modified to provide an API for use in an Angular 2 service. 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 as well as posting to the user's timeline if they choose to share, which also includes a live screenshot of the visualization.

Instructions

http://48angles.2016.angularattack.io/

  • Search for any track in the Spotify universe with search input at top center
  • Add tracks from search results to playlist (open playlist with menu top left)
  • Use player controls to pause/play and advance next track or play previous
  • On desktop, hold right arrow (->) key to preview next track in list, release to play it
  • Use color picker in bottom right to customize the visualizer's colors
  • Use Twitter button in top right to view live tweet stream of #ngTunes
  • Use New Tweet button (big (+) button) to send a tweet with a screenshot of your visualizer

Built With

  • Angular CLI
  • audiograph.xyz
    • Huge thanks to Matt DesLauriers for sharing his sweet visualizer!
    • Customizations made:
    • Removed static playlists
    • Added global object for API methods
    • Combined playlist related data into a single playlist model and updated app to use the new model properties
    • Updated HTML media element to allow for anonymous sources (necessary for Spotify API integration)
    • Updated initial track name display text to be dynamically driven off of the first playlist
    • Added audio player API methods (playNext, playPrevious, playIndex, pause, and play)
    • Updated API to emit events for all audio player actions
    • Updated audio player and visualization loop to support pausing
    • Changed next track key binding to use the right arrow key
    • Added previous track left arrow key binding
    • Updated the geoScene module to allow for user defined color palettes
    • Added visualization API methods and related events (lockPalette, unlockPalette, setPalette, resetPalette, getCurrentPalette, and setPaletteSwapInterval)
  • Loader created by Kevin Jannis found here: https://codepen.io/kevinjannis/pen/KwJvpa
  • angulartics2
  • @ngrx/store
  • pusher-js
  • three.js
  • 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
    • A server component was built with express to handle Twitter OAuth2 authentication in order to send a tweet with a screenshot
  • Font Awesome
  • hint.css
  • Bootstrap

Feedback / Ratings (39)

All Feedback