Cover by Cody Lindley

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

14.10. Creating a jQuery UI Music Player

Problem

You need a music player that supports a common set of interface controls whether the music is being played by Flash Player or HTML5 audio or some other browser audio capability. You need the controls to be accessible, flexible, and themeable. A few basic features will do:

  • Play

  • Pause

  • A track bar to show and control the current point in the playback

  • A progress meter to show how much of the song is buffered

  • Volume

In addition to these basic features, you want one more feature. This music player needs to be scalable. The same interface should work at any size, whether resized by the browser, the user, or the application—all the way up to full screen.

Solution

Let’s build a music player using jQuery UI. We’re going to create the play and pause buttons using jQuery UI CSS Framework icons, and we’re going to create the track bar using the jQuery UI Slider plugin. The progress meter will be a jQuery UI Progressbar. Finally, the volume control will be one more jQuery UI Slider. We’ll wrap these elements in a common container to provide for some nice widget theming so that not only will each of our controls be themed but also our music player as a whole will be themed.

Note

We will not be building this music player as a reusable plugin. We’re simply going to wire together some jQuery UI widgets to work as something that will appear to the user as one component. But the music player itself won’t be a jQuery plugin or a jQuery UI plugin. For this recipe, ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required