1

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.

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.

  • I have considered that a possible jquery solution may be better suited, where I could just find all the anchor tags, determine if they link to a .mp3 and then replace the link with the jplayer. But I would prefer to find a php and wordpress solution. – Vigs Jul 6 '13 at 17:42
0

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.

  • I decided to go the JavaScript route using this. $(document).ready(function(){ $(".post-content a").each(function(){ var url = $(this).attr("href"); if(url.indexOf('.mp3') !== -1){ $(this).addClass('replace-audio-player'); } }); }); Where all links that directly link to a mp3 will have a class added to them called replace-aduio-player and I will then get the url from anchors with that class and replace those links with a player to that file. But if I am unsuccessful I am going to give your answer a try, and will select it. – Vigs Jul 6 '13 at 19:21
  • After looking over your answer I have edited my original question quite substantially to clarify exactly what I am trying to do. I am not somuch trying to alter the URL of the anchor, but to replace the anchor entirely, with the html and js included in my newly altered question, but while using the url from the replaced anchor in the html and js. – Vigs Jul 6 '13 at 19:36
  • It is basically the same answer with a slight modification to the callback. I'll edit it. – s_ha_dum Jul 6 '13 at 19:39
  • Your the man!(assuming your a man O.o) And yes I will probably work on a way to enque a function that accepts the url or something like that. But it works as is. Thankyou somuch! – Vigs Jul 6 '13 at 20:06
0

I did this to find all audio, video tag and mp3, m4v links and turn theme in a jPlayer http://jsfiddle.net/onigetoc/vaot2auz/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.