BlocJams is a Spotify-inspired music player built with AngularJS. This application allows users to view albums and play music, and features a custom control bar to easily change songs or adjust volume.
The goal of the project was to create a new website that would display music albums as well as play back songs from the albums. There were several features that were requested for each part of the application. A landing page was desired to display the logo and highlight key features. Users would need the ability to view the entire collection of albums, including a picture of each album cover and basic album information. The application would also need to play music from each album, as well as have controls for the user to play and pause each song, change songs with next/previous buttons, and adjust the volume of the playback. The controls would also need to display information about the currently playing song, including the song name, duration, and a timer that updates as the song progresses.
The first step of the project was to develop the initial layout of the application. Based upon the design requirements, I created three pages: a landing page, a collection page to display the albums, and an album page to display an individual album. This album page would contain the music player and controls. For styling, I included normalize.css to minimize the potential impact of different browsers being used. I also used Google Fonts and the Ionicons library to give the entire application a clean, consistent style. Media queries were used for responsive breakpoints to adapt to multiple devices and screen sizes.
The final application met all of the user requirements and worked as intended. Testing was done throughout the implementation process as new features were added.