Newscoop 4 Cookbook

Audio player for attached MP3 files

Newscoop has an easy mechanism for attaching files to articles. In the Article Edit screen, on the right, you can attach files either from the existing file archive or upload new files. In this example we will embed an MP3 player in the page, playing audio files which have been attached to the article.

We offer two different examples of using an embedded Flash player. The first example embeds a player at the end of an article, like this:

Audio player on intex-press.by

The player we're using in this example needs to be placed in this folder:

/templates/_swf/player_mp3_maxi.swf 

Any other player and any other folder location is possible. You only need to change the path in the code accordingly.

This code snippet will:

  • Check to see if the article has any attachments; if it does, it will list them
  • Check to see if the attachment has an extension of "mp3"
  • If it is mp3, it will:
    • Display the attachment's file description
    • Call the Flash player and set its values
    • Give the Flash player the URI for the article attachment
    • Create a download link for the article attachment with its URI, file name and size
{{ if $gimme->article->has_attachments }} {{ list_article_attachments }} {{ if $gimme->attachment->extension == "mp3" }}     {{ $gimme->attachment->description }}<br />     <object height="20" width="200" data="/templates/_swf/player_mp3_maxi.swf" type="application/x-shockwave-flash" align="top">         <param value="/templates/_swf/player_mp3_maxi.swf" name="movie" />         <param name="wmode" value="opaque" />         <param value="mp3={{ uri options="articleattachment" }}&amp;showstop=1&amp;showvolume=1&amp;buttonwidth=25&amp;sliderwidth=15&amp;bgcolor1=5EA65E&amp;bgcolor2=365E36" name="FlashVars" />     </object><br />     <a href="{{ uri options="articleattachment" }}" />{{ $gimme->attachment->file_name }}, {{ $gimme->attachment->size_kb }}Kb</a> {{/if}} {{/list_article_attachments}} {{/if}} 

Using multiple players

The second example comes from Fluter.de, and involves keywords and multiple players. Here is a screenshot of how the players appear on the page:

Audio players on fluter.de

This example does the following:

  • Uses an IF statement to see if the article has the keyword of 'mp3podcast1'
  • If it does, Newscoop calls a Flash player
  • Newscoop passes the Flash player the URL of the MP3 file

The audio files on Fluter.de are not article attachments. In the editorial workflow of that publication, the audio files are created separately and uploaded to a special location on the server. The code example below will point to the location:

http://www.fluter.de/medien/podcast_audio/

There, the audio files are sorted in subfolders by issue number, which we can retrieve using {{ $gimme->issue->number }}. Each file name contains a combination of issue number and article number, and finishes with the track number, so we can retrieve a specific file using:

podcast_mp3_{{ $gimme->issue->number }}_{{ $gimme->article->number }}_f1.mp3 

The publication editor adds a keyword to the article containing the number of the audio files; mp3podcast1 means one file, mp3podcast2 two files, and so on. Depending on this keyword, the template will create one or more players. Here is the code for one player:

{{ if $gimme->article->has_keyword(mp3podcast1) }} <object type="application/x-shockwave-flash" data="/medien/player/player.swf" width="290" height="24" id="audioplayer1"><param name="movie" value="http://www.fluter.de/audio-player/player.swf" />     <param name="FlashVars" value="playerID=1&amp;bg=0x999999&amp;leftbg=0x74787A&amp;lefticon=0xffffff&amp;rightbg=0x0090f0&amp;rightbghover=0x74787A&amp;righticon=0x000000&amp;righticonhover=0x0090f0&amp;text=0xffffff&amp;slider=0x0090f0&amp;track=0xFFFFFF&amp;border=0xffffff&amp;loader=0xffffff&amp;soundFile=http%3A%2F%2Fwww.fluter.de%2Fmedien%2Fpodcast_audio%2F{{ $gimme->issue->number }}%2Fpodcast_mp3_{{ $gimme->issue->number }}_{{ $gimme->article->number }}_f1.mp3" />     <param name="quality" value="high" />     <param name="menu" value="false" />     <param name="bgcolor" value="#ffffff" /> </object> {{ /if }} 

This approach can be used for any file attachments; you can apply similar methods for PDF attachments or movies, for example. See the section Article object and attachment, comment, location in the Template Reference for more information on working with article attachments.