• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

MP3 Attachment Player

jacko

Well-known member
in attached_files template find this line:
PHP:
<dl><dt>{xen:phrase file_size}:</dt> <dd>{xen:number $attachment.file_size, size}</dd></dl>

...and above add this:

PHP:
<xen:if is="{$attachment.extension} == 'mp3' ">
<embed type="application/x-shockwave-flash" src="audio-player.swf?audioUrl={xen:link attachments, $attachment}" width="350" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded">
</xen:if>

in attached_files.css find:
PHP:
.attachment
        {
            float: left;
            width: 33%;
        }
and change width value from 33% to 490px or some other value that you find more suitable

For this to work you need to get audio-player.swf file from Google. Currently the player is available here: http://www.google.com/reader/ui/3523697345-audio-player.swf

Of course other flash mp3 players can be used too.

The player will look like this:
Screen shot 2010-11-11 at 21.01.32.webp
 
Thanks for this share... I would like to make a few suggestions...

  1. In your example you didn't close the <xen:if> you need to add another line with </xen:if>
  2. I would suggest making the default use the HTML5 audio tag, with the flash as a fall back option... EG
    HTML:
    <xen:if is="{$attachment.extension} == 'mp3' ">
         <audio src="{xen:link attachments, $attachment}" controls="controls">
           <embed type="application/x-shockwave-flash" src="audio-player.swf?audioUrl={xen:link attachments, $attachment}" width="350" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded">
         </audio>
     </xen:if>
  3. I would also suggest doing the same for other media formats, ogg ETC...
    HTML:
    <xen:if is="{$attachment.extension} == 'mp3||ogg' ">
 
  1. I would suggest making the default use the HTML5 audio tag, with the flash as a fall back option... EG
    HTML:
    <xen:if is="{$attachment.extension} == 'mp3' ">
           <audio src="{xen:link attachments, $attachment}" controls="controls">
             <embed type="application/x-shockwave-flash" src="audio-player.swf?audioUrl={xen:link attachments, $attachment}" width="350" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded">
           </audio>
       </xen:if>
I tried to use that, but for some reason the html5 player shows up for half a second and then there is only grey box with big X on it... Any idea why?

edit: I think I know why - Firefox doesn't support mp3 in audio tags.
 
this is another flash player

unzip the attachment
download it to the root


go to: attached_files
above this
Code:
<dl><dt>{xen:phrase file_size}:</dt> <dd>{xen:number $attachment.file_size, size}</dd></dl>


and but this code
Code:
<xen:if is="{$attachment.extension} == 'mp3' ">
<script language="JavaScript"  src="http://www.website.com.com/flash/audio-player.js"></script>
<object type="application/x-shockwave-flash"  data="http://www.website.com/flash/player.swf" id="audioplayer4"  height="24" width="250">
<param name="movie"  value="http://www.website.com/flash/player.swf">
<param name="FlashVars"  value="playerID=4&amp;soundFile={xen:link attachments,  $attachment}">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
     </xen:if>
 

Attachments

  • flash.zip
    flash.zip
    17.5 KB · Views: 87
  • mp3s.gif
    mp3s.gif
    1.6 KB · Views: 150
I must be missing something here. :/ How do I make it so XF allows MP3 uploads? .mp3 isn't a compatible file extension by default. o_O
 
ACP (admin control panel) ---> setting ---> attachment
Ah; told you I was missing something! :D

Is there an issue with Beta 3 where the attachment doesn't do anything once you hit 100% (it stays on the filled bar instead of changing to allow insertion of thumbnail/full)? I've had that with pictures and now this as well. :/
 
Does your template attached_files look like this?
Code:
<xen:require css="attached_files.css" />

<div class="attachedFiles secondaryContent">
    <h4 class="attachedFilesHeader">{xen:phrase attached_files}:</h4>
    <ul class="attachmentList">
        <xen:foreach loop="$post.attachments" value="$attachment">
            <li class="attachment{xen:if {$attachment.thumbnailUrl}, ' image'}" title="{$attachment.filename}">
                <div class="boxModelFixer primaryContent">
                    
                    <div class="thumbnail">
                        <xen:if is="{$attachment.thumbnailUrl}">
                            <a href="{xen:link attachments, $attachment}" target="_blank" class="LightBoxTrigger"><img 
                                src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="LightBoxImage"
                                data-src="{xen:link attachments, $attachment, 'embedded=1'}" /></a>
                        <xen:else />
                            <a href="{xen:link attachments, $attachment}" target="_blank"><img
                                src="@imagePath/xenforo/widgets/page.png" alt="{$attachment.filename}" /></a>
                        </xen:if>
                    </div>
                    
                    <div class="attachmentInfo pairsJustified">
                        <h6 class="filename"><a href="{xen:link attachments, $attachment}" target="_blank">{$attachment.filename}</a></h6>
                        <xen:if is="{$attachment.extension} == 'mp3' ">
                            <embed type="application/x-shockwave-flash" src="audio-player.swf?audioUrl={xen:link attachments, $attachment}" width="350" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded">
                        </xen:if>                    
                        <dl><dt>{xen:phrase file_size}:</dt> <dd>{xen:number $attachment.file_size, size}</dd></dl>
                        <dl><dt>{xen:phrase views}:</dt> <dd>{xen:number $attachment.view_count}</dd></dl>
                    </div>
                </div>
            </li>
        </xen:foreach>
    </ul>
</div>

<xen:comment><xen:require css="xenforo.css" /></xen:comment>

And your attached_files.css like this?
Code:
.attachedFiles
{
    border: 1px solid @primaryLighterStill;
    border-radius: 5px;
    padding-right: 0;
    margin: 10px 0;
}

    .attachedFiles .attachedFilesHeader
    {
        font-size: 11px;
        font-weight: bold;
        color: @primaryLighter;
    }

    .attachedFiles .attachmentList
    {
        overflow: hidden; zoom: 1;
    }

        .attachment
        {
            float: left;
            width: 33%;
        }
        
        .attachment .boxModelFixer
        {
            overflow: hidden; zoom: 1;
            margin-top: 10px;
            margin-right: 10px;
            padding: 5px;                
            background-color: @contentBackground;
            border: 1px solid @primaryLighterStill;    
            border-radius: 5px;    
        }
            
            .attachment .thumbnail
            {
                float: left;
                width: 100px;
                height: 75px;
                line-height: 75px;
                text-align: center;                                
                border-right: 1px solid @primaryLighterStill;
                padding-right: 5px;
            }
            
                .attachment .thumbnail img
                {
                    max-height: 75px;
                    vertical-align: middle;
                }
            
        .attachment .attachmentInfo
        {
            overflow: hidden; zoom: 1;
            font-size: 11px;
            padding-left: 5px;
        }

            .attachment .attachmentInfo h6,
            .attachment .attachmentInfo dl
            {
                padding: 3px 0;
            }

If not the same, use this one ;)
I guess that this should fix the problem.
 
Top Bottom