Overview

Before starting this project, I spent a good month studying basic JavaScript - variables, arrays, loops, functions, conditionals, and everything else. BlocJams gave me the perfect opportunity to put all of this knowledge to use. This was the first project of Bloc’s Web Development Program. Being the first project in the curriculum and that some students have never studied code before, there was a lot of hand holding going on. I didn’t really like that, so I usually looked at the goal of a checkpoint, wrote the code, and then checked with instruction after finishing. Accordingly, my JavaScript code ended up being relatively different than the source code. For example, I think Bloc often favored keeping instruction simple over keeping the code DRY. But don’t take my word for it; check out Bloc’s source code and decide for yourself.

BlocJams is a Spotify-esque music streaming service, allowing users to listen to all of their favorite albums at the click of a button. The code was initially written with JavaScript, and then rewritten in jQuery. This post will discuss the site page by page. The JavaScript source code can be found here, though conceptually the code is virtually the same, so it will not be included in this post. Also, in order to avoid clutter, non-essential code is viewable via modals and will be highlighted as such.

The app is deployed on Heroku and the source code is available on GitHub.

The Landing Page

Fig 1: Triggering Animations
Fig 1: Triggering Animations
Fig 2: The Animation
Fig 2: The Animation

Users are greeted by BlocJams’ stylish landing page. As seen in Figure 2, there are three elements which come into view as the user scrolls down the page. This effect was achieved using css transforms and transitions. The elements are initially not visible due to the opacity being set to zero. The window is watched and when the user has scrolled far enough down the page (see Figure 1), a JavaScript function called animatePoints is called, changing the opacity to 1 and animating the elements.

The Music Library

Fig 3: Music Library
Fig 3: Music Library

The music library isn’t anything special in its present state. The idea is that users would see their music and be able to filter by options such as artist, album, and song title. There would also be an option to upload or sync music. As this project was focused on playing music and using JavaScript to animate the playbar, this aspect was left out. Instead, a default album called The Colors is tiled repeatedly using JavaScript to fill up the library.

The Album View

So a user clicks a song and it plays…sounds pretty simple, right? WRONG! There is so much JavaScript magic going on behind the scenes to make a song play and the view update correctly. The album page is by far the coolest part of BlocJams. The entire JavaScript file for the album view can be viewed here. The code will be discussed step by step, but please use this file as a reference, as not all functions are explicitly discussed in the following analysis.

  • When the page loads, setCurrentAlbum sets the correct album information to the page. The album information is stored in fixtures.js.
  • When a song is hovered with the mouse, onHover removes the track number and displays a play button if the hovered song is not currently playing. If the song is playing, nothing should change. A similar function, offHover, is called when the mouse leaves the song row. This function removes the play button and replaces it with the song number if the song is not currently playing. Again, nothing should change when the song is playing. For both of these functions, if a song is paused, the play button should remain visible so a user can resume the track.
  • When a user clicks a song, the function clickHandler is called. There three distinct cases to handle:
    1. If no song is currently playing, the function sets the volume, sets the volume bar in the playbar to the correct position, and calls the function playSong. playSong is in charge of many functions including updating the HTML, the playbar information, the audio file, and the seekbar.
    2. If there is a song playing, the song is either played or paused. Keeping DRY code in mind, these functions are reused any time a song is played or paused throughout the site.
    3. If the clicked song is a new song, the process is very similar to situation 1. However, a few steps are different, such as having to stop the currently playing audio file.
  • When the next or previous buttons on the playbar are clicked, nextPrevSong is called. To keep the code DRY, this function handles both the next and previous buttons. The great part about this function (and why it’s so much better than Bloc’s original code) is that it triggers a click on the album’s play button, thus calling the function clickHandler already discussed above. This one line of code makes it so we can reuse all of the code we’ve already written rather than rewriting stop(current_song), play(next_song), etc. like we did before. Pretty cool.
  • Lastly, as the song plays, the seekbar needs to be updated, as well as the track’s current time. If a user clicks or drags the seekbar, the audio track and HTML should both be updated. This was achieved using the function setupSeekBars. Simply put, for click events, the x position of both the click event and the playbar are used to calculate the percentage of the song that should be skipped. For drag events, where the user holds down the mouse and drags the seekbar to a new position, the seekbar’s thumb is bound to the window on click and unbound when the mouse is released. The process for calculating the new track position is similar to what was described above for a click event.

There is some other clever logic (such as playing the first song if the play button is clicked in the playbar but no song has been selected) which wasn’t discussed here, so please make sure to check out the full code on GitHub.

Concluding Remarks

BlocJams has an overall smooth UX. A user can play music and utilize many common features found in a music player. However, there are still many features which could be added to make the BlocJams UX better. Here are a few things:

  • Add player options such as repeat one and repeat all.
  • Use Rails to create a users model.
  • Give users the ability to upload/sync music.
  • Give users the ability to sort by artist and song title in the album view.
  • Give users the ability to make playlists, rate songs, and all the other normal functionality.
  • Fix up a few random bugs in the functionality of the playbar.
  • Use more mobile friendly touch options for the playbar.

Configuration

BlocJams: GitHub / Live Site

Languages and Libraries: HTML, CSS, JavaScript, jQuery, Buzz!Library

To run locally:

Who Invited Angular To The Party?

That’s right, Angular showed up to the party and things are getting pretty crazy. I’m not gonna lie - I was a little sad to throw out all of my code in order to do it again with Angular, but the benefits made it well worth it. Who needs Angular anyways? Well, for starters Angular is lightning fast. It’s a single-page application (SPA) which basically page loads are not required when navigating to different pages. This is ideal for BlocJams, as not reloading the page allows music to continue playing even when a user navigates away from the album view (a feature not included in the JavaScript versions). Another great thing is Angular’s two-way data binding which allows data to be updated in real time whenever a user makes changes.

Anyways, checkout the code on GitHub.