Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with the Observer Pattern in Java EE Platform

In this article we will see how to create a custom audio player for the web environment using only jQuery and audio plugins.

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.

Listing 1: HTML Code

<div class="containerplayer">
 
 <div id="listcontainer" class="playlistcontainer"></div>
 
 <div id="playercontainer">
 <ul class="controls"></ul>
 <div class="audiodetails"></div>
 <div class="progress"></div>
 <div class="volumecontrol"></div>
 </div>
 
 </div>

Playlist

Using data_src, is a list of unordered songs that make up the playlist.

Listing 2: The playlist code

<ul id="playListContainer">
 <li data_src="songsfolder/the-reincarnation-of-benjamin-breeg.mp3">
 <a href="#">Iron Maiden – The Reincarnation of Benjamin Breeg</a>
 </li>
 <li data_src="songsfolder/elderly-woman-at-the-counter-in-a-small-town.mp3">
 <a href="#">Pearl Jam – Elderly Woman at the Counter in a Small Town</a>
 </li>
 </ul>

Audio controls

Audio controls makes use of the plug-in data attributes for several actions.

Listing 3: Defines the various audio controls of the player

<ul class="controls">
 <li><a href="#" class="shuffle shuffleActive" data-attr="shuffled"></a></li>
 <li><a href="#" class="left" data-attr="prevAudio"></a></li>
 <li><a href="#" class="play" data-attr="playPauseAudio"></a></li>
 <li><a href="#" class="right" data-attr="nextAudio"></a></li>
 <li><a href="#" class="repeat" data-attr="repeatSong"></a></li>
 </ul>

Details of the audio track

The information about the song, such as time and name, are primarily based on the data-attr=”timer”.

Listing 4: Provides audio track details

<div class="audiodetails">
 <span class="songPlay"></span>
 <span data-attr="timer" class="audioTime"></span>
 </div>

The progress bar

Whenever we use the data-attr-=”seekableTrack” option, the progress bar works.

Listing 5: Track seeking features

<div class="progress">
 <div data-attr="seekableTrack" class="seekableTrack"></div>
 <div class="updateProgress"></div>
 </div>

Volume Controls

For increasing and decreasing the volume, as may be necessary.

Listing 6: Volume control features

<div class="volumecontrol">
 <div class="volume volume1"></div>
 <input class="bar" data-attr="rangeVolume" type="range" min="0" max="1" step="0.1" value="0.6" />
 </div>

JavaScript Code

This primarily contains the code for JavaScript.

Listing 7: The JavaScript code that implements the audio player

<script src="jquery.js"></script>
<script src="jquery.audioControls.js"></script>
<script>
    $(document).ready(function() {
        $("#playlistcontainer").audioControls({
            autoPlay: false,
            timer: 'increment',
            onAudioChange: function(response) {
                $('.songPlay').text(response.title + ' ...'); //Song name details
            },
            onVolumeChange: function(vol) {
                var obj = $('.volume');
                if (vol <= 0) {
                    obj.attr('class', 'volume mute');
                } else if (vol <= 35) {
                    obj.attr('class', 'volume volume1');
                } else if (vol > 35 && vol <= 70) {
                    obj.attr('class', 'volume volume2');
                } else if (vol > 70) {
                    obj.attr('class', 'volume volume3');
                } else {
                    obj.attr('class', 'volume volume1');
                }
            }
        });
    });
</script>

Figure 1 – Displaying custom audio player output

CSS implementation

Listing 8: This CSS implementation allows for better design features for the developed audio player

  #listcontainer {
      width: 300px;
      background-color: #fafafa;
  }
  #listcontainer ul {
      background-color: #fafafa;
      clear: both;
      cursor: pointer;
  }
  #listcontainer li {
      padding: 15px;
  }
  #playercontainer {
      width: 300px;
      height: 132px;
      background-color: #333333;
  }
  .controls li:first {
      margin-right: 15px
  }
  .controls li {
      float: left;
      display: inline-block;
      width: 55px;
      text-align: center;
      margin-top: 10px;
      margin-left: 12px
  }
  .progress {
      clear: both;
      height: 5px;
      background-color: #666666;
      width: 100%;
      cursor: pointer;
      position: relative;
  }
  .progress .updateProgress {
      width: 0px;
      background-color: #00BD9B;
      height: 100%;
      float: left;
      position: relative;
  }
  .volumecontrol {
      position: relative;
      margin: 10px auto;
  }
  .volumecontrol .updateProgress {
      display: inline-block;
      vertical-align: middle;
      margin-top: 5px;
  }
  input[type="range"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #00BD9B;
      height: 4px;
  }

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

What did you think of this post?
Services
[Close]
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,00
This 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,00
This 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!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login