Working with the Observer Pattern in Java EE Platform

Very often, as a web designer and developer, you
might be assigned a task that needs the incorporation of an audio or video
player. More so, this is pretty much that case when it comes to websites that
feature audio content. Earlier, things were pretty different when it came to
featuring audio on websites. Developers primarily had to depend on the likes of
third-party plug-ins in browsers, mainly Flash, Silverlight, QuickTime etc. to implement.
However, developers did face plenty of issues with them. For example, it
required users to install these plug-ins and not everyone liked doing so. Some
were even pretty inaccessible.

At present however, we live in world that has HTML5
and one of the best aspects, when it comes to playing audio, happens to be the <audio>
tag that allows files to directly called from the browser. Thus, there is no
need to install plug-ins such as Flash and Silverlight, ones which often come
with their own set of issues.

Now, while there are many methods that one can
employ, in order to develop an audio player, we are just going to show one using
the likes of jQuery.

The reasons why we have opted for this particular
approach is mainly because -

jQuery
allows for better audio players that can be used to play your mp3, media and
music files.

Also,
there is plenty of audio plug-ins that are available online and can prove to be
pretty useful.

Lastly,
with jQuery audio plug-ins the integration process with web pages and
applications can turn out to be whole lot easy when compared to many other approaches.

What
do we require to build the audio player?

To build a custom audio player, we will need –

HTML5

jQuery

What
is audioControls.js?

AudioControls happens to be a jQuery audio plug-in,
amongst many others, that is both, simple and lightweight. Using this enables
you to create your very own audio player, along with various additional
features such as playlist and more.

It is particularly designed for web HTML5 players
and allows for very fast integration. It works with the HTML5 <audio> tag
and you can create the design aspects and then go ahead and add plug-in data attributes
to the elements.

audioControls.js
features

AudioControls happens to support a number of
features in its plug-in for audio playing. These have been enumerated.

Playlists

Repeat
audio

Playlist
shuffle

Repeat
playlist

Audio
timer for increment and decrement

Seek
track option

Default
player controls and a buffer loader

Supports
a huge array of themes

Easy
integration facility

Extensible with a number of API’s and Events

How
to install audioControls.js?

Setting up and including audioControls.js is really
easy, for those of you wondering on how you can implement it.

You need to include the script after the jQuery
library, using the following –

<script src="/path/to/jquery.audioControls.js"></script>

Also, it is recommended that you do not include the from
GitHub directly, as it is blocked in IE for Windows 7, considering that it is
served as a plain text file and of the wrong MIME type.

Data
Attributes available

The audioControls.js plug-in offers a number of data
attributes that make up the heart of the plug-in, since they allow detection
and enabling of controls.

Some of the attributes and their functions have been
outlined below –

playPauseAudio – This allows play and pause control options and also
activates the playAudio and pauseAudio css classes.

nextAudio – This is mainly to allow the next audio control, and
it picks the next track from the playlist. Also, it returns disabled if there
is no next track in the playlist.

prevAudio – Allows previous audio control, and picks the
previous track from the playlist. Returns disabled if there is no previous
track.

rangeVolume – The attribute allows to control the range of
volume.

repeatSong – This replays the current audio. If it is already
active, then it returns the repeatAudio class.

timer – Increment or decrement mode for an audio is enabled.

seekableTrack – This allows jumping between different audio
positions by enabling the click event.

Implementing
a custom audio player with audioControls.js

Now that you are pretty familiar with basics of the
AudioControls plug-in for jQuery, we will demonstrate how to exactly implement
an audio player using it.

Code
for HTML

This primarily consists of the HTML code that has
been laid out into seven separate horizontal parts.

Conclusion

These days, as more and more websites move on to featuring
interactive content, the use of a custom audio player happens to be just one of
the many options that can be incorporated into a website. Thus, if you happen
to be a website developer, it is certainly good if you know about the many different
methods that allow you to implement an audio player into the website. More so,
with a huge bunch of languages available that allow you to build one easily,
there is hardly any excuse if you are not up to date and know none of the ways
to create one.

By going through the above piece of code, you can
certainly learn the method to implement a custom audio player with jQuery and by
means of using the AudioControls plug-in. While this isn’t the only approach
that is available, it sure seems to be one of the fastest and easiest means to
do so. However, if you are looking for a different option, then there is many
other jQuery audio plug-INS that can be used to build a custom audio player as
well.

Julio is a System analyst and enthusiast of Information Technology. He is currently a developer at iFactory Solutions company, working in the development of strategic systems, is also a JAVA instructor. He has knowledge and experi...

To have full access to this post (or download the associated files) you must have MrBool Credits.

See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video.Subscribe for this package!