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:
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
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.
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.
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, ...