Audio player

Basically what I'm trying to do is to add an audioplayer in the normal profile. To do this I've been trying to use the javascript Spetter gave me for this problem: https://help.forumotion.com/t146850-bbcode-html-in-rpg-profile

Code:


$(function() {
    var pathname = $(location).attr('pathname');
        if (pathname.match("^/u") ) {
          $("textarea").each(function(index, value) {
            var obj = jQuery(value);
            var tmp = obj.val().replace(/[\r\n]/g, "<br />");
 
            $format_search =  [
                /\[b\](.*?)\[\/b\]/ig,
                /\[i\](.*?)\[\/i\]/ig,
                /\[u\](.*?)\[\/u\]/ig,
                /\[img\](.*?)\[\/img\]/ig,
                /\[center\](.*?)\[\/center\]/ig,
                /\[left\](.*?)\[\/left\]/ig,
                /\[right\](.*?)\[\/right\]/ig,
                /\[music](.*?)\[\/music\]/ig
            ]; // note: NO comma after the last entry
         
            // The matching array of strings to replace matches with
            $format_replace = [
                '<strong>$1</strong>',
                '<em>$1</em>',
                '<span style="text-decoration: underline;">$1</span>',
                '<img class="rpgtext_img" src="$1" />',
                '<center>$1</center>',
                '<left>$1</left>',
                '<right>$1</right>',
                '<div class="mpmusic"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="250" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="#393939"><param name="FlashVars" value="mp3=$1"></object></div>'
            ];
         
            // Perform the actual conversion
            for (var i =0;i<$format_search.length;i++) {
              var tmp = tmp.replace($format_search[i], $format_replace[i]);
            }
 
            var newTag = jQuery("<div></div>").html(tmp);
            newTag.addClass("mpbg");
            obj.replaceWith(newTag);
 
        });
    }
});


As you can see I tried to convert the html code for audioplayer into BBcode ([music]link mp3 file[/music]). It worked, but it only works in the rpg profile field, not in the normal profile (I'm guessing you need a different class for that one). Ofcourse I could just add it to the rpg profile field, but my problem is that I want the audio player to appear in the mini-profile next to posts. Forumotion has a limited number of rpg fields to be visible in posts (3), and all three of them are already in use on my website. The normal profile has no limit, that's why I want the audio player in there.

I hope someone can help me out here.

Hi @Farronsister,

This script is meant to replace the content in the RPG fields within the profile section of posts, correct ? If so, try installing the script below in the topics only :

Code:

 $(function() {
  $("textarea").each(function(index, value) {
    var obj = jQuery(value);
    var tmp = obj.val().replace(/[\r\n]/g, "<br />");

    $format_search =  [
        /\[b\](.*?)\[\/b\]/ig,
        /\[i\](.*?)\[\/i\]/ig,
        /\[u\](.*?)\[\/u\]/ig,
        /\[img\](.*?)\[\/img\]/ig,
        /\[center\](.*?)\[\/center\]/ig,
        /\[left\](.*?)\[\/left\]/ig,
        /\[right\](.*?)\[\/right\]/ig,
        /\[music](.*?)\[\/music\]/ig
    ]; // note: NO comma after the last entry

    // The matching array of strings to replace matches with
    $format_replace = [
        '<strong>$1</strong>',
        '<em>$1</em>',
        '<span style="text-decoration: underline;">$1</span>',
        '<img class="rpgtext_img" src="$1" />',
        '<center>$1</center>',
        '<left>$1</left>',
        '<right>$1</right>',
        '<div class="mpmusic"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="250" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="#393939"><param name="FlashVars" value="mp3=$1"></object></div>'
    ];

    // Perform the actual conversion
    for (var i =0;i<$format_search.length;i++) {
      var tmp = tmp.replace($format_search[i], $format_replace[i]);
    }

    var newTag = jQuery("<div></div>").html(tmp);
    newTag.addClass("mpbg");
    obj.replaceWith(newTag);

  });
});

( or replace your current script if you want )

Hi Ange

No, sorry, that's not really what I mean. Hm, lemme show you what I am trying to by the use of screens.

1. When I add the bbcode [music] in a rpg profile field, it works. Like this:



2. But, when I add it in a normal profile field, it doesn't work:



See? I presume this is because of newTag.addClass("mpbg");

I see, in that case, try replacing the script with this :

Code:

$(function() {
  $("textarea, .field_uneditable").each(function(index, value) {
    var obj = jQuery(value);
    var tmp = (obj[0].tagName == 'TEXTAREA' ? obj.val() : obj.html()).replace(/[\r\n]/g, "<br />");
 
    $format_search =  [
        /\[b\](.*?)\[\/b\]/ig,
        /\[i\](.*?)\[\/i\]/ig,
        /\[u\](.*?)\[\/u\]/ig,
        /\[img\](.*?)\[\/img\]/ig,
        /\[center\](.*?)\[\/center\]/ig,
        /\[left\](.*?)\[\/left\]/ig,
        /\[right\](.*?)\[\/right\]/ig,
        /\[music](.*?)\[\/music\]/ig
    ]; // note: NO comma after the last entry
 
    // The matching array of strings to replace matches with
    $format_replace = [
        '<strong>$1</strong>',
        '<em>$1</em>',
        '<span style="text-decoration: underline;">$1</span>',
        '<img class="rpgtext_img" src="$1" />',
        '<center>$1</center>',
        '<left>$1</left>',
        '<right>$1</right>',
        '<div class="mpmusic"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="250" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="#393939"><param name="FlashVars" value="mp3=$1"></object></div>'
    ];
 
    // Perform the actual conversion
    for (var i =0;i<$format_search.length;i++) {
      var tmp = tmp.replace($format_search[i], $format_replace[i]);
    }
 
    var newTag = jQuery("<div></div>").html(tmp);
    newTag.addClass("mpbg");
    obj.replaceWith(newTag);
 
  });
});

If it doesn't work let me know.

Almost.

Although, this is what happens now when I try to edit the profile:



I can't edit it any longer. :\

Hmm.. the script must replace the original element then. See if this fixes the problem :

Code:

$(function() {
  $("textarea, .field_uneditable").each(function(index, value) {
    var obj = jQuery(value);
    var tmp = (obj[0].tagName == 'TEXTAREA' ? obj.val() : obj.html()).replace(/[\r\n]/g, "<br />");
 
    $format_search =  [
        /\[b\](.*?)\[\/b\]/ig,
        /\[i\](.*?)\[\/i\]/ig,
        /\[u\](.*?)\[\/u\]/ig,
        /\[img\](.*?)\[\/img\]/ig,
        /\[center\](.*?)\[\/center\]/ig,
        /\[left\](.*?)\[\/left\]/ig,
        /\[right\](.*?)\[\/right\]/ig,
        /\[music](.*?)\[\/music\]/ig
    ]; // note: NO comma after the last entry
 
    // The matching array of strings to replace matches with
    $format_replace = [
        '<strong>$1</strong>',
        '<em>$1</em>',
        '<span style="text-decoration: underline;">$1</span>',
        '<img class="rpgtext_img" src="$1" />',
        '<center>$1</center>',
        '<left>$1</left>',
        '<right>$1</right>',
        '<div class="mpmusic"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="250" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="#393939"><param name="FlashVars" value="mp3=$1"></object></div>'
    ];
 
    // Perform the actual conversion
    for (var i =0;i<$format_search.length;i++) {
      var tmp = tmp.replace($format_search[i], $format_replace[i]);
    }
 
    var newTag = jQuery("<div " + (obj[0].tagName == 'TEXTAREA' ? '' : 'class=\"field_uneditable\"') + "></div>").html(tmp);
    newTag.addClass("mpbg");
    obj.replaceWith(newTag);
 
  });
});

Still the same, sorry. :c

Alright then, I think I got it now. Replace the script with the one below.

Code:

$(function() {
  $("textarea, .field_uneditable").each(function(index, value) {
    var obj = jQuery(value);
    var tmp = (obj[0].tagName == 'TEXTAREA' ? obj.val() : obj.html()).replace(/[\r\n]/g, "<br />");
 
    $format_search =  [
        /\[b\](.*?)\[\/b\]/ig,
        /\[i\](.*?)\[\/i\]/ig,
        /\[u\](.*?)\[\/u\]/ig,
        /\[img\](.*?)\[\/img\]/ig,
        /\[center\](.*?)\[\/center\]/ig,
        /\[left\](.*?)\[\/left\]/ig,
        /\[right\](.*?)\[\/right\]/ig,
        /\[music](.*?)\[\/music\]/ig
    ]; // note: NO comma after the last entry
 
    // The matching array of strings to replace matches with
    $format_replace = [
        '<strong>$1</strong>',
        '<em>$1</em>',
        '<span style="text-decoration: underline;">$1</span>',
        '<img class="rpgtext_img" src="$1" />',
        '<center>$1</center>',
        '<left>$1</left>',
        '<right>$1</right>',
        '<div class="mpmusic"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="250" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="#393939"><param name="FlashVars" value="mp3=$1"></object></div>'
    ];
 
    // Perform the actual conversion
    for (var i =0;i<$format_search.length;i++) {
      var tmp = tmp.replace($format_search[i], $format_replace[i]);
    }
 
    var newTag = jQuery("<div></div>").html(tmp);
    newTag.addClass("mpbg");

    if (obj.tagName == 'TEXTAREA') {
      obj.replaceWith(newTag);
    } else {
      obj.html(tmp);
    }
 
  });
});

Sorry I'm not very familiar with the script.

I'm sorry, it still doesn't. Now it transforms the BBcode into html.




If it's too hard, maybe we should try something else? For example, is it possible to change the limit of 3 rpg profile fields in the post profiles to 4? That would fix the problem as well for me.

I see, any further I'd be making blind guesses. Could you provide me an account on that forum that can see this "music field" ? It'd give me more information to work with rather than looking at images and trying to guess the document's markup.

EDIT :

Scratch that, I noticed I made a typo in the script I gave you. Give it a try now :

Code:

$(function() {
  $("textarea, .field_uneditable").each(function(index, value) {
    var obj = jQuery(value);
    var tmp = (obj[0].tagName == 'TEXTAREA' ? obj.val() : obj.html()).replace(/[\r\n]/g, "<br />");
 
    $format_search =  [
        /\[b\](.*?)\[\/b\]/ig,
        /\[i\](.*?)\[\/i\]/ig,
        /\[u\](.*?)\[\/u\]/ig,
        /\[img\](.*?)\[\/img\]/ig,
        /\[center\](.*?)\[\/center\]/ig,
        /\[left\](.*?)\[\/left\]/ig,
        /\[right\](.*?)\[\/right\]/ig,
        /\[music](.*?)\[\/music\]/ig
    ]; // note: NO comma after the last entry
 
    // The matching array of strings to replace matches with
    $format_replace = [
        '<strong>$1</strong>',
        '<em>$1</em>',
        '<span style="text-decoration: underline;">$1</span>',
        '<img class="rpgtext_img" src="$1" />',
        '<center>$1</center>',
        '<left>$1</left>',
        '<right>$1</right>',
        '<div class="mpmusic"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="250" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="#393939"><param name="FlashVars" value="mp3=$1"></object></div>'
    ];
 
    // Perform the actual conversion
    for (var i =0;i<$format_search.length;i++) {
      var tmp = tmp.replace($format_search[i], $format_replace[i]);
    }
 
    var newTag = jQuery("<div></div>").html(tmp);
    newTag.addClass("mpbg");

    if (obj[0].tagName == 'TEXTAREA') {
      obj.replaceWith(newTag);
    } else {
      obj.html(tmp);
    }
 
  });
});

Now if that doesn't work, see my prior message before this edit.

@Farronsister thanks for the test account. I made a modification to the script :

Code:

/\/u\d+/.test(window.location.href) && $(function() {
  $("textarea:not(.post), .field_uneditable").each(function(index, value) {
    var obj = jQuery(value);
    var tmp = (obj[0].tagName == 'TEXTAREA' ? obj.val() : obj.text()).replace(/[\r\n]/g, "<br />");
 
    $format_search =  [
        /\[b\](.*?)\[\/b\]/ig,
        /\[i\](.*?)\[\/i\]/ig,
        /\[u\](.*?)\[\/u\]/ig,
        /\[img\](.*?)\[\/img\]/ig,
        /\[center\](.*?)\[\/center\]/ig,
        /\[left\](.*?)\[\/left\]/ig,
        /\[right\](.*?)\[\/right\]/ig,
        /\[music](.*?)\[\/music\]/ig
    ]; // note: NO comma after the last entry
 
    // The matching array of strings to replace matches with
    $format_replace = [
        '<strong>$1</strong>',
        '<em>$1</em>',
        '<span style="text-decoration: underline;">$1</span>',
        '<img class="rpgtext_img" src="$1" />',
        '<center>$1</center>',
        '<left>$1</left>',
        '<right>$1</right>',
        '<div class="mpmusic"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="250" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="#393939"><param name="FlashVars" value="mp3=$1"></object></div>'
    ];
 
    // Perform the actual conversion
    for (var i =0;i<$format_search.length;i++) {
      var tmp = tmp.replace($format_search[i], $format_replace[i]);
    }
 
    var newTag = jQuery("<div></div>").html(tmp);
    newTag.addClass("mpbg");
 
    if (obj[0].tagName == 'TEXTAREA') {
      obj.replaceWith(newTag);
    } else {
      obj.html(tmp);
    }
 
  });
});

It's already installed on the forum you sent me, so let me know if it works now.

P.S.
I noticed you have something installed on the forum that replaces all the textareas ? It's not in JS codes management so I'm assuming it's in the templates. Either way I saw that it sort of messed with editing the profile fields, especially the music one.

Thanks! It's working now yes.
I'm not sure about the installation that replaces the textareas. It must be in the profile_view_body template. However, I don't see any problems?

The last thing that still doesn't work however is the postprofile. That one still shows the BBcode. Could that be fixed as well?

Sure, try replacing your current script with the one below.

Code:

$(function() {
  $("textarea:not(.post), .field_uneditable, .mpinfo2 h8").each(function(index, value) {
    var obj = jQuery(value);
    var tmp = (obj[0].tagName == 'TEXTAREA' ? obj.val() : obj.text()).replace(/[\r\n]/g, "<br />");
 
    $format_search =  [
        /\[b\](.*?)\[\/b\]/ig,
        /\[i\](.*?)\[\/i\]/ig,
        /\[u\](.*?)\[\/u\]/ig,
        /\[img\](.*?)\[\/img\]/ig,
        /\[center\](.*?)\[\/center\]/ig,
        /\[left\](.*?)\[\/left\]/ig,
        /\[right\](.*?)\[\/right\]/ig,
        /\[music](.*?)\[\/music\]/ig
    ]; // note: NO comma after the last entry
 
    // The matching array of strings to replace matches with
    $format_replace = [
        '<strong>$1</strong>',
        '<em>$1</em>',
        '<span style="text-decoration: underline;">$1</span>',
        '<img class="rpgtext_img" src="$1" />',
        '<center>$1</center>',
        '<left>$1</left>',
        '<right>$1</right>',
        '<div class="mpmusic"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="250" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="#393939"><param name="FlashVars" value="mp3=$1"></object></div>'
    ];
 
    // Perform the actual conversion
    for (var i =0;i<$format_search.length;i++) {
      var tmp = tmp.replace($format_search[i], $format_replace[i]);
    }
 
    var newTag = jQuery("<div></div>").html(tmp);
    newTag.addClass("mpbg");
 
    if (obj[0].tagName == 'TEXTAREA') {
      obj.replaceWith(newTag);
    } else {
      obj.html(tmp);
    }
 
  });
});

Yes, great! It removes the mini-avatar though? (the small round picture shown in the post above)