The Landing Page
The Music Library
The Album View
- 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:
- 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.
- 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.
- 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
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.
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.
To run locally:
Who Invited Angular To The Party?
Anyways, checkout the code on GitHub.