Advanced Usage: MP3 Player Programming

Advanced Usage: MP3 Player Programming

Warning: This tutorial involves programming in javascript.

Since BB Website Plugins is built using the popular JQuery javascript framework, it is very easy to tie your own custom programming in to the function of bbmp3 players on your page. If you're not familiar with JQuery, we recommend that you take a crash course first.

Creating Players:

Basic jquery usage:

<script type="text/javascript">

  /* code to execute when the document is loaded */
  $(document).ready(function() {

    /* find all elements with the 'bbmp3-player' class and turn them into mp3 players */
    $(".bbmp3-player").bbmp3();

  });
</script>

The code example above tells jquery to wait until the document is fully loaded, and then finds all elements that have the "bbmp3-player" class and executes the .bbmp3() jquery plugin on them.

When the .bbmp3 plugin is applied without any configuration parameters, the plugin will read in settings from the attributes of any matched elements, and use default settings for everything else. You can optionally specify settings for the plugin to use when you invoke the plugin from a jquery selector.

Alternative jquery usage:

<script type="text/javascript">

  $(document).ready(function() {

    $(".bbmp3-player").bbmp3({
      width: 400,
      height: 400,
      href: "http://www.beatbrokerz.com",
      player: "bbmp3-7933",
      title: "My Custom Player Title",
    });

  });
</script>

Controlling Players:

The bbmp3 plugin can also be used to control command functions on players such as play, pause, stop, volume, etc. You can target an individual player, a list of players, or all players on your page.

Here is the list of available commands:

  • play (start playback / resume playback)
  • pause (pause playback at current time marker)
  • stop (stop playback and reset time marker to 0:00)
  • forward (fast forward playback 5 seconds)
  • rewind (rewind playback 5 seconds)
  • prev (start the next song in the playlist)
  • next (go back to the last song in the playlist)
  • volume (this command accepts a volume value between 0 and 1 where 0 = mute, .5 = 50%, 1 = 100%, etc)

Dispatching a command is done through jquery as follows:

Native Way:
$.bbmp3('volume', targetPlayers [,value]);

Alternative Way:
$.bbmp3.volume(targetPlayers [,value]);

Example:

<script type="text/javascript">

  /* pause all players on the page */
  $.bbmp3.pause('all');

  /* start playing a player (with a specific ID) */
  $.bbmp3.play('bbmp3-7933');

  /* turn the volume up on two players at once */
  $.bbmp3.volume(['bbmp3-7933','bbmp3-7979'], .8);

</script>