Replace audio links with jplayer using the_content filter

2 Views

I am attempting to use : 

add_filter( 'the_content', 'filter_function_name' );

To find all of the anchor tags in my post which link to a .mp3 file, and then replace them with a jplayer instance that would play the file, instead of just having the link to be file being displayed.

Read More

So, I am trying to get all of the anchors tags that are output by the_content to be replaced by instances of the following html and js:

html: 

  <div id="jquery_jplayer_#uniqueid" class="jp-jplayer"></div>
  <div id="jp_container_#uniqueid" class="jp-audio">
    <div class="jp-type-single">
      <div class="jp-gui jp-interface">
        <ul class="jp-controls">
          <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
          <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
          <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
          <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
        <div class="jp-time-holder">
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <ul class="jp-toggles">
            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
          </ul>
        </div>
      </div>
      <div class="jp-title">
        <ul>
          <li>Music Player</li>
        </ul>
      </div>
      <div class="jp-no-solution">
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
      </div>
    </div>
  </div>

Javascript: 

<script type="text/javascript">
$(document).ready(function(){
  $("#jquery_jplayer_#uniqueid").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        m4a: "#the_url_from_the_anchor_tag",
      }) //.jPlayer("play");
    },
    swfPath: "js/jplayer",
    supplied: "m4a, mp3, oga",
    wmode:"window",
    cssSelectorAncestor: '#jp_container_#uniqueid'
  });
  });
 </script>

Any help is appreciated. Thanks.

Post Views: 2

Related posts

2 comments

  1. You well need to add a filter to the_content and alter the markup. This should replace the markup for <a> tags having URLs ending in .mp3, which you mentioned specifically in a comment.

    function replace_audio_link_cb_105555($match) {
  if (!empty($match[1]) && '.mp3' == substr($match[1],-4)) {
    $your_long_block_of_markup = '<div id="jquery_jplayer_#uniqueid" class="jp-jplayer"></div>
    <div id="jp_container_#uniqueid" class="jp-audio">... and so on ...</div>';
    $your_javascript = '<script type="text/javascript">
      jQuery(document).ready(function(){
        jQuery("#jquery_jplayer_#uniqueid").jPlayer({
          ready: function () {
            jQuery(this).jPlayer("setMedia", {
              m4a: "#the_url_from_the_anchor_tag",
            }) //.jPlayer("play");
          },
          swfPath: "js/jplayer",
          supplied: "m4a, mp3, oga",
          wmode:"window",
          cssSelectorAncestor: "'.$match[1].'"
        });
        });
      </script>';
    $match[0] = $your_long_block_of_markup.$your_javascript;
  }
  return $match[0];
}

function replace_audio_link_105555($content) {
  $pattern = '|<a.*?href="(.*)".*>?.*?(?:</a>)?|';
  $content = preg_replace_callback($pattern,'replace_audio_link_cb_105555',$content);
  return $content;
}
add_filter('the_content','replace_audio_link_105555');

    If it were me, I’d work out a way to make that javascript a bit more flexible so that I could register and enqueue it, rather than print it independently for each audio file.

Comments are closed.