Explanation

Bloc Jams is a responsive front-end digital music player built with Angular JS and designed to function in a way similar to applications such as Spotify.

Problem

A site needed to be built where the user could search a library of albums and play tracks with full control such as Play/Pause, Next/Previous, Seek and Auto Play. The site was also required to be responsive allowing for a great user experience on mobile and tablet devices.

Solution

The site was built initially using HTML & CSS and then later adapted to Angular JS. I utilised the Buzz! Music library (a small javaScript HTML5 audio library) which allowed for greater control over the functions required in the scripts.

Results

The end result is a fast, responsive design where the user can select tracks and listen on their desktop or mobile devices. Users can Play/Pause tracks, skip to the next or previous and adjust volume with ease. There is also the ability to play a continuous album as the code allows for a track to auto play once the previous has finished.

As tracks are playing the “Player Bar” at the base of the page will give the current track information in real time and allow the user to “seek” to a desired point of the track.

Conclusion

Building the site with AngularJS and utilising javaScript libraries such as Buzz! provides a powerful single page application.