Page 60 – Custom Music Player

When I made Color Picker, I never thought I would be using the jQuery UI slider again and again!

I recently made a billing page with a slider for Trippeo:

A slider for the pricing on Trippeo’s new landing page:

And a custom music player, all using jQuery UI slider!

Would it be fun to see how many different pages I could build using jQuery UI slider? It could be a jQuery UI slider collection!

For this custom music player, I created a JavaScript Song object with the song titles, artists, album images, and file names. I used the HTML5 audio element to play and pause the songs. I had previously used the audio element for my Rainbow Piano but added an audio element for every sound on the page. This time, I created a single audio element and changed the audio source to play different songs.

I used the ‘play’, ‘pause’, and ‘ended’ events to go through the songs on the playlist. When the events play or pause were fired, I would change the play button accordingly. When the ‘ended’ event fired, I checked to see if there is a next song. If there is a next song, then I play that song. If there isn’t a next song but the Repeat All option is on, then I go back to the beginning of the list and play the first song.

Once I got the audio element up and working, it was time to create a custom interface. I took inspiration from the iOS music UI. I created a playlist from my Songs object and used font awesome icons for the controls. The song timeline was a little tricker, should I divide the current playing time by the total time and show the progress through a CSS div?

Turns out jQuery UI slider was perfect for the job! I set up the slider with a min of 0 and a max of the song’s total playing time. By using the audio element’s ‘timeupdate’ event (which fires when the current playback position changes), I could update the slider position as the song played. I got the audio’s playback position in seconds and updated the value on the slider to match. Showing the remaining time and the current play time was done with simple math calculations on the audio’s currentTime and duration properties.

Finally, I used CSS to add some styles to the playlist and highlight the current playing song.

Originally I used some free instrumental music I found but Richerd suggested fun top 40 songs. I googled and realized it’s really easily to create short audio clips from full songs! Simply open the song in iTunes and right click to ‘get Info’. Then, fill in the times you want to start and stop the song, save, and right click the song to ‘Create an mp3’. Tada! Short song previews!

Enjoy the music.

Page 60 – Custom Music Player

Trippeo – Subscription Plan Menu

Unavailable plans are greyed out and not clickable. The selected plan is highlighted.

Here’s how I made changes to my Trippeo subscription page to eliminate unnecessary clicking.

The user decides whether they want to be billed monthly or annually. The annual pricing is 17% cheaper. When a user decides on a plan, the “Next” button appears. This was set up so that a plan would have to be selected before the user can proceed.

However, this is confusing and tedious. When a user selects the Team option, and click on the annual/monthly toggle to see the different pricing, their selection disappears. They then have to click Team again. On the technical side, this happens because there are actually 8 plan options, 4 each in monthly and annual billing. But as a user, I just see the four team size options. I would think that the toggle is changing the pricing, not showing me 4 completely different plans than what I selected from before.

To make this less confusing, I kept the user’s selection even when they toggle between annual and monthly billing.

When the user toggles between annual/monthly billing, their team size selection stays highlighted.

When a user selects a plan, I update a hidden input value with the selected plan id. I also store the size of the selected plan in a variable (Individual, Team, Studio, or Company). I called this variable selectedTeamSize.

When the user clicks on the toggle, I check to if selectedTeamSize has a value. If so, I first remove the current highlighted plan. I then look in the plan table that is now showing (either annual or monthly) and find the plan with the same team size. I highlight that plan and update my hidden input value with the new plan id.

In the example above, the user first chose the Studio option in the monthly plan chart. When the user clicks the toggle to switch to annual billing, the Studio option for the annual plan chart is automatically selected.

This makes the selection process smoother and eliminates confusion.

Trippeo – Interactive Form

My task was to create an interactive form for users to contact Trippeo. The backend developers created 3 simple input fields with a submit button. We used a jQuery plugin to validate the phone number field.

Since the form would only be for companies with 25 employees or more, it did not have to be shown as a default. I first created a simple section with the option to contact Trippeo.

Upon clicking the button, Trippeo’s contact information and the form would appear and slide down. The intro text would slide up and disappear. Originally I changed the states with CSS transitions but another way is to simply use jQuery methods slideUp() and slideDown(). A problem with the methods is that they toggle CSS display: none and display: block to show and hide items. This can cause issues if your shown elements need to be inline-block. (The inline styles of display: block will override your inline-block styles.) In that case, animating with CSS would be the way to go.

The user can contact Trippeo through the contact info on the left, or submit a form that gets sent to a company e-mail address. Once the form is sent, the form slides up and disappears. The user gets a notice saying their message has been received!

An improvement that could be made to the form is to simplify the input fields even further. Since the most crucial info is the user’s name, number, and company size, the third input field could be made into a drop down selector. The user would then choose their company size, say 25-30 employees, or 100+ employees. This would not only make the process simpler for the user, but also give Trippeo some valuable information to bucket interested companies into tiers.