phpBB has some really neat features for file attachments that you might use automatically with a post. For example, if you upload an image and hit the button “Place Inline”, some BBcode will be added to the text box and when you preview or submit your post the image will be rendered inside of the post instead of just a link to download the image. Similarly, if you upload a .wma file and place it inline, you will get the Windows media player to play this file back to anybody viewing that post. Unfortunately, no such thing exists by default for .MP3 files, the popular audio format.

I’ve previously covered how to create a BBcode that will take the URL to an MP3 file and create an embedded Flash player for that file in a post (along with other very handy BBcodes). You could even upload an MP3 file as an attachment and then take the URL to that file and put it into the MP3 BBcode and everything would work just fine.

player


Now, we’re going to take that modification a step further and make it so that if you upload an MP3 file and you click the “Place Inline” button, it will put the file URL in the text box and wrap it in the [mp3][/mp3] BBcodes automatically.

inline

Step 1: Download the player

You’ll need to download this player (right-click, Save as…). It is an .swf file; this is the actual flash player that provides an interface and the means to playback .mp3 files.

Step 2: Upload the player to your server

Upload the .swf file you just downloaded to some location on your server and note the path to it. It will need to have permissions set to be publicly readable.

Step 3: Create the BBcode

In order to add more BBcodes, log into the Administration Control Panel. There, go to the Posting tab, and then BBCodes. Click the ‘Add a new BBCode’ grey button to get to the next page where you can configure your new entries. Create a new BBcode with the following information. You can decide for yourself if you want it shown on the posting page or not. If you need further help with this step, see my previous post on Essential BBcodes. Be sure to use the correct code that points to where you uploaded the player.swf file you downloaded in step 1.

BBCode: [mp3]{URL}[/mp3]

HTML: <object type="application/x-shockwave-flash" data="http://www.404techsupport.com/mp3player/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://www.yoursite.com/mp3player/player.swf" />
<param name="FlashVars" value="playerID=1&soundFile={URL}" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="wmode" value="transparent" />
</object>

Help line: [mp3]URL to file[/mp3]

Step 4: Modify two files.

Create a back up copy of each of these files. Then modify these files and upload them back to your server.

phpbbRoot/styles/prosilver/template/editor.js

Find:

/**
* Add inline attachment at position
*/
function attach_inline(index, filename)
{
insert_text('[attachment=' + index + ']' + filename + '[/attachment]');
document.forms[form_name].elements[text_name].focus();
}

Replace with (Be sure to update the code so that it is pointing to the correct location for your forum):

/**
* Add inline attachment at position
*/
function attach_inline(index, filename, attach_id)
{
if (filename.match(".mp3"))
{
insert_text('[mp3]' +'http://yourforumURL.com/download/file.php?id=' + attach_id +'[/mp3]'+'   ' + filename);
document.forms[form_name].elements[text_name].focus();<br />
}
else
{
insert_text('[attachment=' + index + ']' + filename + '[/attachment]');
document.forms[form_name].elements[text_name].focus();
}
}

phpbbRoot/styles/prosilver/template/posting_editor.html

Find:

<input type="button" value="{L_PLACE_INLINE}" onclick="attach_inline({attach_row.ASSOC_INDEX}, '{attach_row.A_FILENAME}');" />&nbsp; <!-- ENDIF -->

Replace with:

<input type="button" value="{L_PLACE_INLINE}" onclick="attach_inline({attach_row.ASSOC_INDEX}, '{attach_row.A_FILENAME}', '{attach_row.ATTACH_ID}');" />&nbsp;  <!-- ENDIF -->

Step 5: Purge the cache

In the Administration Control Panel, under the General tab, click the ‘Run now’ button across from “Purge the cache.”

Step 6: Test it out!

Go to your forum and create a new post. Upload an .mp3 file and hit the button to “Place Inline” as soon as the upload finishes. In the text area, you should get some text inserted that appears like in the following screenshot.

result

Original credit goes to this site, The Koumjian Review, but I use a different Flash player, only edit two files, and corrected a number of bugs and syntax errors from that post. If you’d like to test this functionality out, you can post in the comments to this article in the forum by following the link below.

Comment on this post in our forums



Related posts:

  1. Essential BBcodes for your phpBB Forum
  2. An FLV Player and BBcode for Inline FLV Attachments in phpBB3
  3. Ask 404TS: How do I expand your phpBB mods to work for the Subsilver2 theme?