1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. 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

Discussion in 'Template Modifications [Archive]' started by jacko, Nov 11, 2010.

  1. jacko

    jacko Active Member

    in attached_files template find this line:
    PHP:
    <dl><dt>{xen:phrase file_size}:</dt> <dd>{xen:number $attachment.file_sizesize}</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
            
    {
                
    floatleft;
                
    width33%;
            }
    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.png
     
    7OKE, Jake Bunce, cherjo and 15 others like this.
  2. Cezz

    Cezz Well-Known Member

    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' ">
     
  3. jacko

    jacko Active Member

    Thank you!

    I fixed the code - I overlooked this important detail when I pasted it.
     
  4. jacko

    jacko Active Member

    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.
     
  5. Cezz

    Cezz Well-Known Member

  6. kkm323

    kkm323 Well-Known Member

    thanx man
    great work
    i'll try this later
     
  7. Darfuria

    Darfuria Active Member

    This works very nicely indeed :)
     
  8. kkm323

    kkm323 Well-Known Member

    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>
     

    Attached Files:

    Lemminator, maxicep, Veer and 2 others like this.
  9. Floris

    Floris Guest

    That's awesome! Great for my podcast community :D

    huge +1
     
  10. Trombones13

    Trombones13 Well-Known Member

    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
     
  11. kkm323

    kkm323 Well-Known Member

    ACP (admin control panel) ---> setting ---> attachment
     
    Trombones13 likes this.
  12. Trombones13

    Trombones13 Well-Known Member

    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. :/
     
  13. Brogan

    Brogan XenForo Moderator Staff Member

    Trombones13 likes this.
  14. DSF

    DSF Well-Known Member

    After update B3 -> B4 the mp3 attachement shows as below. What can I do?

    1.jpg
     
  15. Vincent

    Vincent Well-Known Member

    What is the exact problem?
    Is it that the bar is only half shown?
     
  16. DSF

    DSF Well-Known Member

    Yeah, after update the bar only show half :eek:
     
  17. Vincent

    Vincent Well-Known Member

    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.
     
  18. jacko

    jacko Active Member

    in attached_files.css find:
    PHP:
    .attachment
            
    {
                
    floatleft;
                
    width33%;
            }
    and change width value from 33% to 490px or some other value that you find more suitable
     
    Mutt likes this.
  19. DSF

    DSF Well-Known Member

    Yes, it's look like this.

    Many thanks. It's ok now again.
     
  20. Salty

    Salty Active Member

    great mod, having some trouble with .avi though~
     

Share This Page