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:
Slider Part 1

A slider for the pricing on Trippeo’s new landing page:
Screen Shot 2015-06-23 at 5.31.34 PM
And a custom music player, all using jQuery UI slider!
Screen Shot 2015-06-23 at 5.32.18 PM

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.
Screen Shot 2015-06-23 at 6.03.15 PM

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

Advertisements

2 thoughts on “Page 60 – Custom Music Player

  1. Hey Stacey!

    I stumbled upon your blog/github and found it so inspiring! I am thinking about getting into the tech industry but find it somewhat intimidating because it is so male-dominated and I am starting from scratch.

    I would love if I could get some insights on your tech journey! I can be reached at tina.truong21@gmail.com.

    I hope to hear from you soon 🙂

    Best,
    Tina

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s