Custom bar width for the WPaudio player

The plugin that I chose to use for adding audio streams to my posts and pages is WPaudio. I really like the plugin because it offers a simple, good looking, player interface that can be added just about anywhere. The plugin turns any audio link or “wpaudio” shortcode into a player interface along with a loading and length bar.

The only shortcoming that I found was that I could not specify a custom width for the stream bar. By default the width of the bar depends on the width of the text used for the stream title. If that title was just a few letters long, then the bar would be just a wide.

In order to change the plugin code to accept an additional argument to the “wpaudio” shortcode, there are only three changes that are needed. The files that need to change are wpaudio.php and wpaudio.js.

The changes to wpaudio.php are in two functions – wpaShortcode() and wpaLink(). As it comes, from the plugin archive, the wpaShortcode() function looks like this:

</p>
<p>function wpaShortcode($atts){<br />
  # Convert shortcodes to WPaudio player depending on settings<br />
  extract(shortcode_atts(Array(<br />
    'url' =&gt; false,<br />
    'text' =&gt; false,<br />
    'dl' =&gt; true<br />
  ), $atts));<br />
  # If no url, return with nothing<br />
  if (!$url)<br />
    return;<br />
  # Get player HTML and JS<br />
  return wpaLink($url, $text, $dl);<br />
}</p>
<p>

First, I had to change the above function to be able to parse out an additional argument to the shortcode, which I can use to specify the desired bar width. The name of that argument would, creatively enough, be ‘width’. After the change, the function looks like this:

</p>
<p>function wpaShortcode($atts){<br />
  # Convert shortcodes to WPaudio player depending on settings<br />
  extract(shortcode_atts(Array(<br />
    'url' =&gt; false,<br />
    'text' =&gt; false,<br />
    'dl' =&gt; true,<br />
    'width' =&gt; false,<br />
  ), $atts));<br />
  # If no url, return with nothing<br />
  if (!$url)<br />
    return;<br />
  # Get player HTML and JS<br />
  return wpaLink($url, $text, $dl, $width);<br />
}</p>
<p>

The change extracts the value of the argument, if it is present and call the wpaLink() function passing in the new argument value.

The next step is to change the wpaLink() function to generate a link with the new argument. The original function looks like this:

</p>
<p>function wpaLink($url, $text = false, $dl = true) {<br />
  global $wpa_urls;<br />
  $class = 'wpaudio';<br />
  $html = '';<br />
  # Handle dl URLs and no dl players<br />
  if ($dl == '0') {<br />
    $js_url = wpaUnicode($url);<br />
    $href = '#';<br />
  }<br />
  elseif (is_string($dl)) {<br />
    $js_url = wpaUnicode($url);<br />
    $href = $dl;<br />
  }<br />
  else {<br />
    $href = $url;<br />
  }<br />
  if (isset($js_url)) {<br />
    $class .= ' wpaudio_url_' . $wpa_urls++;<br />
    $html .= "&lt;script type='text/javascript'&gt;/* &lt;![CDATA[ */ wpa_urls.push('$js_url'); /* ]]&gt; */&lt;/script&gt;";<br />
  }<br />
  # Handle blank text<br />
  if (!$text) {<br />
    $text = basename($url);<br />
    $class .= ' wpaudio_readid3';<br />
  }<br />
  $html .= "&lt;a class='$class' href='$href'&gt;$text&lt;/a&gt;";<br />
  return $html;<br />
}</p>
<p>

The changed function is below. Note the next-to-last line of the changed function. That is where the new change is located.

</p>
<p>function wpaLink($url, $text = false, $dl = true, $width = false) {<br />
  global $wpa_urls;<br />
  $class = 'wpaudio';<br />
  $html = '';<br />
  # Handle dl URLs and no dl players<br />
  if ($dl == '0') {<br />
    $js_url = wpaUnicode($url);<br />
    $href = '#';<br />
  }<br />
  elseif (is_string($dl)) {<br />
    $js_url = wpaUnicode($url);<br />
    $href = $dl;<br />
  }<br />
  else {<br />
    $href = $url;<br />
  }<br />
  if (isset($js_url)) {<br />
    $class .= ' wpaudio_url_' . $wpa_urls++;<br />
    $html .= "&lt;script type='text/javascript'&gt;/* &lt;![CDATA[ */ wpa_urls.push('$js_url'); /* ]]&gt; */&lt;/script&gt;";<br />
  }<br />
  # Handle blank text<br />
  if (!$text) {<br />
    $text = basename($url);<br />
    $class .= ' wpaudio_readid3';<br />
  }<br />
  $html .= "&lt;a class='$class' href='$href'".($width?" width='$width'":"")."&gt;$text&lt;/a&gt;";<br />
  return $html;<br />
}function wpaLink($url, $text = false, $dl = true, $width = false) {<br />
  global $wpa_urls;<br />
  $class = 'wpaudio';<br />
  $html = '';<br />
  # Handle dl URLs and no dl players<br />
  if ($dl == '0') {<br />
    $js_url = wpaUnicode($url);<br />
    $href = '#';<br />
  }<br />
  elseif (is_string($dl)) {<br />
    $js_url = wpaUnicode($url);<br />
    $href = $dl;<br />
  }<br />
  else {<br />
    $href = $url;<br />
  }<br />
  if (isset($js_url)) {<br />
    $class .= ' wpaudio_url_' . $wpa_urls++;<br />
    $html .= "&lt;script type='text/javascript'&gt;/* &lt;![CDATA[ */ wpa_urls.push('$js_url'); /* ]]&gt; */&lt;/script&gt;";<br />
  }<br />
  # Handle blank text<br />
  if (!$text) {<br />
    $text = basename($url);<br />
    $class .= ' wpaudio_readid3';<br />
  }<br />
  $html .= "&lt;a class='$class' href='$href'".($width?" width='$width'":"")."&gt;$text&lt;/a&gt;";<br />
  return $html;<br />
}</p>
<p>

With these two changes, the HTML link that gets generated will include the width argument if one is present in the “wpaudio” shortcode. The next step is to change the code in wpaudio.js, which will read the HTML link and use it to add the player and stream bar.

There are another two changes that I made in wpaudio.js – one in the wpaBarWidth() function and another in onready handler of the soundManager object. The original wpaBarWidth() function looks like this:

</p>
<p>function wpaBarWidth(id) {<br />
    // Fix bar width for IE and make min width for sub text<br />
    var text_width = jQuery('#wpa' + id + '_text').width();<br />
    var bar_width = (text_width &gt; 109) ? text_width : 110;<br />
    jQuery('#wpa' + id + '_bar').width(bar_width);<br />
    // Fix for IE crapping on inline-block<br />
    if (navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/MSIE/i))<br />
         jQuery('#wpa' + id + '_sub').width(bar_width);<br />
}</p>
<p>

The change to the function make it accept a new argument and then use that argument to change the width of the bar:

</p>
<p>function wpaBarWidth(id, width) {<br />
    // Fix bar width for IE and make min width for sub text<br />
    var text_width = jQuery('#wpa' + id + '_text').width();<br />
    var bar_width = (text_width &gt; 109) ? text_width : 110;<br />
    bar_width = (width &gt; bar_width) ? width: bar_width;<br />
    jQuery('#wpa' + id + '_bar').width(bar_width);<br />
    // Fix for IE crapping on inline-block<br />
    if (navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/MSIE/i))<br />
         jQuery('#wpa' + id + '_sub').width(bar_width);<br />
}</p>
<p>

The above change changes the width of the bar’s ‘<div>’ tag depending on whether the passed-in width value is larger then the width of the title text.

The last change that needs to be made is to get the onready() handler of the soundManager object to extract the width from the HTML link generated by the wpaLink() function and pass it to the wpaBarWidth() function. That section of the code is pretty big so I will not post the entire thing. Instead I will post two areas of the code that need to change.

First, we extract the value of the argument. The original code looks like this:

</p>
<p>   var dl = jQuery(this).attr('href');<br />
   var url = (jQuery(this).attr('class') &amp;&amp; jQuery(this).attr('class').match(/wpaudio_url_\d+/)) ? wpa_urls[jQuery(this).attr('class').match(/wpaudio_url_\d+/)[0].substr(12)] : dl;<br />
   // Check for dl - change link to # or to dl param<br />
   var dl_html = (dl == '#') ? '' : '&lt;a id="wpa' + wpa_id + '_dl" href="' + dl + '"&gt;Download&lt;/a&gt;';</p>
<p>

Modified code is this:

</p>
<p>   var dl = jQuery(this).attr('href');<br />
   var url = (jQuery(this).attr('class') &amp;&amp; jQuery(this).attr('class').match(/wpaudio_url_\d+/)) ? wpa_urls[jQuery(this).attr('class').match(/wpaudio_url_\d+/)[0].substr(12)] : dl;<br />
   // Check for dl - change link to # or to dl param<br />
   var dl_html = (dl == '#') ? '' : '&lt;a id="wpa' + wpa_id + '_dl" href="' + dl + '"&gt;Download&lt;/a&gt;';<br />
   var width = jQuery(this).attr('width');<br />
   width = (typeof(width)!='undefined') ? width : 0;</p>
<p>

Next, we pass it to the wpaBarWidth() function. Original code:

</p>
<p>   wpaBarWidth(wpa_id);<br />
   // Player settings object<br />
   var wpa_settings = {</p>
<p>[/cc]</p>
<p>Modified code is:</p>
<p>[cc lang="javascript"]</p>
<p>   wpaBarWidth(wpa_id,width);<br />
   // Player settings object<br />
   var wpa_settings = {</p>
<p>

Related Posts

• Small Quick jQuery News Ticker
  12 October 2011 11:05 AM | 2 Comments

  There are a very large number of great WordPress themes out there and a lot of them offer a Featured Post Slider, which is a great way to show off [...]

  Read More
• Fixing up the WP-Update-Message plugin (Part 1)
  12 October 2010 11:33 AM | No Comments

  A lot of my posts on this website have to do with code that I have written for WordPress or changes I’ve made to code that others have written. On [...]

  Read More
• Fixing up the WP-Update-Message plugin (Part 2)
  15 October 2010 2:45 PM | No Comments

  In Part 1 of this two-part post, I discussed some small bug fixes to the WP-Update-Message plugin that should improve usability of the plugin. In this part, I am posting [...]

  Read More
• Tagged Posts Widget
  06 October 2010 5:57 PM | 11 Comments

  With the upgrade of my site to Arras 1.5.0.1, I started work on my own child theme (you can see the results on the main page). One of the things [...]

  Read More
• Arras and the Featured-Content-Gallery plugin
  10 February 2010 5:32 PM | 17 Comments

  For some time now, I have been using the Arras theme for WordPress on my website. The theme is pretty good compared to a lot of other themes and it [...]

  Read More