This web application is a music streaming application based on BlocJams but written in AngularJS (1.6).
The routing for BlocJams Angular is accomplished by using the built-in angular service urlRouterProvider which targets the <ui-view> element on the page of the Single Page Application (SPA) to fill with the template that you associate with a particular url route. Each defined route can have a template and a controller associated with it.
The landing page is meant to grab your attention with a large-format image. It is simple and the user has no trouble knowing where to look. They can follow the arrow by scrolling down to get a small description of the site/service, or they can navigate straight to the albums or even search for a song right from the navigation bar.
The collections page gathers all the albums in one place so that you can easily find what you're looking for and access those songs. It makes effective use of the ng-repeat built-in directive to loop over the albums and render the same HTML content for each one.
The album view is accessed by via the url /album/{id} where {id} is an integer representing an album from a 'back-end'. Data from that album is used to populate this page with relevant information and also points to the relevant audio and image files for the songs of this album.
Directives allow for similar segmenting of the code as well as re-using UI functionality across the app. BlocJams has two directives of note: player-bar, which is the part of the site that relates to user-facing playback controls; and song-searcher, which is an suggestion matching search field. The complexity of these parts of the UI and the potential for them to be involved in several ares of the site made them good candidates for splitting off into their own directives.
| Property/Method | Purpose | Details |
|---|---|---|
| albums | stores an array of albums | - |
In order to play audio in BlocJams Angular, this project includes Plyr. Plyr is a JavaScript library for media playback in web sites. It targets HTML elements and can also display audio/visual playback controls if desired. In this application, we simply rely on it for playing audio in the browser and exposing functions for various actions 'play', 'pause', 'change song', 'volume up/down', and 'seek'.
In order to expose the relevant plyr functionality to the different UI components, I decided to create an Angular Service to wrap around it. This allowed multiple areas of the site to simply 'inject' the service and interact with the shared plyr instance. This was important because users can influence playback behavior both from the Album view and the player bar.
| Property/Method | Purpose | Details |
|---|---|---|
| play | plays the current song, if one is selected | - |
This service provides some common-use functions to all of the controllers/services that can benefit from them.
| Property/Method | Purpose | Details |
|---|---|---|
| forEach | A function that executes a callback function on every item in an array | - |
To run the application server, clone the repository locally and run the following command:
$ npm start
This will start running the application. You can open http://localhost:3000/ in your browser to access it.