Bloc-Jams Case Study
This application is one of three projects completed during the Front-End Foundations training portion of the Bloc Web Developer Track. As a student of this course, I followed the course curriculum and collaborated with a mentor to author this project.
Students were provided with the logo, icons, background images and mp3 music files for use in the site.
The main function of the Bloc Jams application is to display an album view and play music files. The project began with creating the landing page and a link to an album ‘collection’ view (pictured below).
The HTML created in the
$template variable was called using a
Students were also tasked with creating a songplayer UI (pictured below) that would be linked to by clicking on an album name on the album collection view page.
In addition to a song list, the project requirements included the ability to switch between song tracks, pause, play and update the total duration in minutes for each track. Song transition was needed in two locations, in the song list grid in the center of the album page as well as at the buttons in the player bar at the bottom of the page.
songNumber using the Buzz library in the function
clickhandler function makes each song row clickable allowing the user to toggle play / pause each song from the row.
togglePlayFromPlayerBar function allows the user to toggle play / pause each song from the player bar at the bottom of the page.
Users can also skip to specific points in a song using the seek bar or adjust the volume using the volume control on the bottom player bar.