The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Audio player

View previous topic View next topic Go down

Audio player

Post by Farronsister on May 10th 2016, 5:25 pm

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: http://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.

Farronsister
New Member

Posts : 14
Reputation : 1
Language : Dutch/English

http://www.warriorcatsnl.com/

Back to top Go down

Re: Audio player

Post by Ange Tuteur on May 16th 2016, 4:51 pm

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 )

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Audio player

Post by Farronsister on May 16th 2016, 5:27 pm

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");

Farronsister
New Member

Posts : 14
Reputation : 1
Language : Dutch/English

http://www.warriorcatsnl.com/

Back to top Go down

Re: Audio player

Post by Ange Tuteur on May 16th 2016, 5:51 pm

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. salut

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Audio player

Post by Farronsister on May 16th 2016, 6:06 pm



Almost.

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



I can't edit it any longer. :\

Farronsister
New Member

Posts : 14
Reputation : 1
Language : Dutch/English

http://www.warriorcatsnl.com/

Back to top Go down

Re: Audio player

Post by Ange Tuteur on May 16th 2016, 6:14 pm

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);
 
  });
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Audio player

Post by Farronsister on May 16th 2016, 6:16 pm

Still the same, sorry. :c

Farronsister
New Member

Posts : 14
Reputation : 1
Language : Dutch/English

http://www.warriorcatsnl.com/

Back to top Go down

Re: Audio player

Post by Ange Tuteur on May 16th 2016, 8:31 pm

Alright then, I think I got it now. Replace the script with the one below. Wink
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. lol!

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Audio player

Post by Farronsister on May 16th 2016, 9:26 pm

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.

Farronsister
New Member

Posts : 14
Reputation : 1
Language : Dutch/English

http://www.warriorcatsnl.com/

Back to top Go down

Re: Audio player

Post by Ange Tuteur on May 16th 2016, 10:30 pm

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. Facepalm 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. Razz

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Audio player

Post by Ange Tuteur on May 18th 2016, 4:43 pm

@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. salut

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Audio player

Post by Farronsister on May 18th 2016, 7:01 pm

Thanks! It's working now yes. Very Happy
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?


Farronsister
New Member

Posts : 14
Reputation : 1
Language : Dutch/English

http://www.warriorcatsnl.com/

Back to top Go down

Re: Audio player

Post by Ange Tuteur on May 18th 2016, 7:31 pm

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);
    }
 
  });
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Audio player

Post by Farronsister on May 19th 2016, 7:56 pm

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

Farronsister
New Member

Posts : 14
Reputation : 1
Language : Dutch/English

http://www.warriorcatsnl.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum