This article series by Tom Gross, author of Plone 3 Multimedia, explains how to add audio content to Plone and enhance its features with Plone4Artists products. It also shows how to include audio data in HTML with plugins and Flash.

There are at least four use cases when we think of integrating audio in a web application:

1. We want to provide an audio database with static files for download.
2. We have audio that we want to have streamed to the Internet (for example, as a podcast).
3. We want a audio file/live show streamed to the Internet as an Internet radio service.
4. We want some sound to be played when the site is loaded or shown.

In this article we will discuss three of the four cases. The streaming support is limited to use case 2. We can stream to one client like a podcast does, but not to many clients at once like an Internet Radio does. We need special software such as Icecast or SHOUTcast for this purpose. Further, we will investigate how we solve use cases 1, 2, and 3 with the Plone CMS and extensions. Technically, these are the topics covered in this article:

• Manipulation of audio content stored as File content in Plone
• The different formats used for the binary storage of audio data
• Storing and accessing MP3 audio metadata with the ID3 tag format
• Managing metadata, formats, and playlists with p4a.ploneaudio in Plone
• Including a custom embedded audio player in Plone
• Using the Flowplayer product to include an audio player standalone in rich text and as a portlet
• Previewing the audio element of HTML5
• Extracting metadata from a FLAC file using mutagen

This article is the third and the final section of this article series. The following articles are the initial parts of the series.

• Managing Audio Content in Plone 3.3
• Audio Enhancements with p4a.ploneaudio in Plone 3.3

(For more resources on Plone, see here.)

Including audio into HTML

Generally, we have two options to include a sound file on a HTML page:

• Streaming
• Non streaming

Another option is to simply include a link to the file like this:

<a href="example.mp3" type="audio/x-mpeg" title="MP3 audiofile , ...
kB">example.mp3 </a>

This is the standard way Plone includes files into the visual editor.

The advantage of this approach is that virtually everyone is able to access the file in some way. What happens with the file after it has been downloaded depends on the client browser and how it is configured. The shortcoming of this method is that we depend on an external player to listen to the audio. Probably one needs to download the file and start the player manually.

Including audio with plugin elements

Another option to spread an audio file is to use the embed element or the object element. The former looks like this:

<embed src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="example.mp3">

The embed element was introduced by Netscape in browser version 2.0. However, it has not yet made it into the HTML standard, and probably will never do so. An alternative element to the Netscape variant is the object element that was introduced by Microsoft. Including an example.mp3 file located in the data folder looks like this:

<object type="audio/x-mpeg" data="data/example.mp3" width="200"
height="20">
<param name="src" value="data/example.mp3">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : <a href="data/example.mp3">example.mp3</a>
</object>

Including audio with the embed or the object element assumes that there is a plugin installed on the client side that can play the multimedia format. In most cases, we can't tell what the client is equipped with and want a more robust solution.

The third way to include audio into your site is Flash. We still need a plugin on the client side, but Flash is more widespread than audio player plugins. There are a couple of free audio players written in Flash. An older but easy-to-use Flash player is EMFF.

A custom view with an embedded audio player

What we do now is to write a custom view for the audio-enhanced File content type of Plone. We reuse the mm.enhance product we created in the previous article and add the additional code there.

We utilize the p4a.audio.interfaces.IAudioEnhanced interface to register our view on.

Let's do so:

<browser:page
for="p4a.audio.interfaces.IAudioEnhanced"
name="my-audioplayer-view"
class=".browser.AudioPlayerView"
permission="zope2.View"
template="player.pt"
/>
<browser:resourceDirectory
directory="thirdparty/emff"
name="emff"
/>

The page is named my-audioplayer-view and has the AudioPlayerView view class in the browser module. Further, we register a thirdparty/emff directory where we can put the Flash resources of the Flash player. Next, we need to create this view class and add the player.pt template.

We fill the template with the HTML code we get from the EMFF code generator:

Using the EMFF code generator

Choose the first option URL to MP3, though it doesn't really matter what you write into the text field. The value is overridden with the name we retrieve from our context object. For the HTML version, you can either choose HTML or XHTML as Plone 3 doesn't output valid XHTML itself. Nevertheless, XHTML might still be the better option, as it is future proof. Selecting XHTML closes the param elements inside of the object element.

We can copy this literally into our Zope page template.

<object type="application/x-shockwave-flash" data="emff_lila_info.swf"
width="200" height="55">
<param name="movie" value="emff_lila_info.swf" />
<param name="bgcolor" value="#00ff00" />
<param name="FlashVars" value="src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=example.mp3&amp;autostart=yes" />
</object>

The Plone template is a standard one using the main_template. We copy the generated code from the bottom of the codegenerator window and put into the main slot of the template. There are just two changes we make. One is the location of the Flash file, which is registered as a resource, and the other is the audio file itself, which is our context.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"
i18n:domain="p4a.audio"
metal:use-macro="context/main_template/macros/master">
<body>
<div metal:fill-slot="main">
<object type="application/x-shockwave-flash"
data=" ++resource++emff/emff_lila_info.swf" width="200"
height="55">
<param name="movie" value="emff_lila_info.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars"
value="src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=example.mp3&amp;autostart=yes"
tal:attributes="value string:src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=${context/getId}&amp;
autostart=yes" />
</object>
</div>
</body>
</html>

Next, we download the necessary Flash code from its website. The player is provided as a ZIP package with all sources and stuff included. We need to copy the chosen skin file to the thirdparty/emff directory of our mm.enhance product. In our example we used the emff_lila_info skin.

Plone 3 Multimedia

Embed, display, and manage multimedia content in your Plone website

Published: May 2010
eBook Price: $26.99
Book Price: $44.99
See more

close

Select your format and quantity:

Book 01234567891011121314151617181920

eBook 01234567891011121314151617181920

(For more resources on Plone, see here.)

Using Flowplayer

If we want to use an audio Flash player on our site, but don't want to do any coding and are not satisfied with the one from p4a.ploneaudio, there is an alternative. It is possible to use the Flowplayer for our audio data. The Flash and JavaScript application Flowplayer is mainly designed to be a video player, but can be used as an audio player as well. Unfortunately, the only audio format the player understands is MP3. So if we have any other format we have to convert it to the MP3 format first. The Flowplayer is included with the Plone wrapper product collective.flowplayer. At the time of writing, the available version of the wrapper was 3.0b5. There are four ways in which we can use collective.flowplayer to include the audio into your site:

1. As a standalone player for files with the filename extension .mp3
2. As a playlist for folders containing MP3 files
3. As a portlet
4. Inline in any page supporting Rich Text (HTML)

The product itself can easily be added to our Plone setup by adding the following configuration lines to the instance in our buildout.cfg:

[instance]
...
eggs =
...
collective.flowplayer
zcml =
...
collective.flowplayer

After rerunning the buildout, restarting the instance, and installing Flowplayer via Plone's add-on products, we are ready to go.

Standalone Flowplayer for audio files

The most straightforward way to include the Flowplayer is to use the enhancing feature of the File content type. If we upload a file with an .mp3 extension, the file is recognized as a supported audio file. It is marked with the collective. flowplayer.interfaces.IAudio interface and the default view is changed to Flowplayer. This view comes with collective.flowplayer and embeds a minimal Flowplayer instance into the page.

Combining p4a.ploneaudio and Flowplayer

If you have both the p4a.ploneaudio and collective.flowplayer products installed and you upload a file, it will get the default view of Flowplayer. The p4a.audio.interfaces.IAudioEnhanced interface still marks the file. Custom views binding on that interface will still work. For example you will still be able to access the customskin view you wrote binding on IAudioEnhanced. Calling the view view accesses the p4a.ploneaudio default view.

It is not necessary to store the audio files in the Plone site itself. With collective.flowplayer installed, Plone recognizes Link content objects pointing to audio data. If a URL ends with .mp3, Plone will change the default view to flowplayer accordingly. From the UI perspective, there is no difference. The only difference is the source of the audio file. While it is stored in the ZODB in the first case, it is fetched through a URL in the other case.

Playlist Flowplayer for audio containers

If we have folders or collections containing files with the .mp3 extension or links pointing to MP3 files directly, we can provide a flowplayer view. All we have to do is to call the flowplayer view on the container. Alternatively, the flowplayer view can be chosen as default view for a container. The player looks the same as for single media, including two buttons between the play/pause button and the timeslide. These two buttons provide skip to the next/previous track functions.

Audio Flowplayer as a portlet

We can expose the Flowplayer as a portlet. All we need is a file or a container, as described before, as a data provider. We add the portlet as a Video player portlet in the manage-portlets view at the desired location in our site.

Inline audio player with Flowplayer

One killer feature of collective.flowplayer is the integration of the player applet in normal pages. With the simple addition of a certain CSS class, every link to an MP3 file can be turned into a Flowplayer. The code for doing this is here:

<a class="autoFlowPlayer audio" href="audio-file.mp3">
This text is replaced.
</a>

If we only need a play button, the code will look like this:

<a class="autoFlowPlayer audio minimal" href="audio-file.mp3">
This text is replaced.
</a>

For the integration of the Flowplayer in rich text, there is a shortcut in Kupu. We need to create a link pointing to an MP3 file in a separate paragraph. It doesn't matter if this link is internal or external. Then we choose one of Audio, Audio (left) or Audio (right) as the paragraph style.

To get an inline playlist, the following code is required:

<div class="playListFlowPlayer audio">
<a class="playListItem" href="audio1.mp3">Audio one</a>
<a class="playListItem" href="audio2.mp3">Audio two</a>
</div>

The documentation of the product suggests that the div element can be extended with the random option to get a randomized playlist.

Technology preview: HTML5

Let's peek into HTML5. HTML5 is the successor of HTML4. It supports the inclusion of audio and video without using Flash. There is a dedicated audio element for audio content. This element supports the following attributes:

A player view with HTML5

Writing a player view with HTML5 is extremely easy with the audio element. Let's assume we have the following page definition in ZCML:

<browser:page
for="p4a.audio.interfaces.IAudioEnhanced"
name="newtechplayer"
permission="zope2.View"
template="html5player.pt"
/>

The html5player.pt page template contains only one element:

<div metal:fill-slot="main"
tal:define="audio_info context/@@audio_view">
<h4 tal:content="context/title" /> -
<h4 tal:content="audio_info/artist" />
<audio controls="controls"
tal:attributes="src context/absolute_url">An audio player
</audio>
</div>

Browser support for HTML5

The described method works only with selected (preview) versions of current web browsers. When tested, the best results were with Safari 4 and Firefox 3.5. Opera 10 beta and Internet Explorer 8 don't seem to understand the audio element at all. And there is another limitation: Different browsers play different audio formats. While Firefox plays only the open codecs WAV, Ogg Vorbis and Ogg Theora; Safari seems to be limited to MP3. Bear this in mind when experimenting with HTML5.

Summary

In this article series, we saw how to include audio content into Plone. We saw how the File content type can be used to store audio data in Plone and how the data can be fetched from it. Additionally, we investigated the storage and the compression of audio data in general. We learned about different audio formats, and their advantages and disadvantages if using them in the web context.

Next we saw how we can enhance the audio features of Plone with the Plone4Artists product p4a.ploneaudio. We investigated the enhancement of single audio files, containers, and collections of audio files.

We learned how to include audio data in HTML with plugins and Flash. We wrote a simple player for our audio data and tried Flowplayer as an alternative player. Finally, we did a small preview on HTML5 where playing audio files is a core component of the Hypertext Markup Language.

Further resources on this subject:

• Plone 3 Multimedia [book]
• Managing audio content in Plone 3.3 [article]
• Audio Enhancements with p4a.ploneaudio in Plone 3.3 [article]
• Red5: A video-on-demand Flash Server [article]

• Plone 3.3 Products Development Cookbook [book]
• Creating a custom type with paster in plone 3 [article]
• Creating, Customizing, and Assigning Portlets Automatically for Plone 3.3 [article]
• Improving Plone 3 Product Performance [article]

• Plone 3 for Education [book]
• Calendaring with Plone 3 for Education [article]
• Showcasing Personnel with Faculty/Staff Directory using Plone 3 [article]
• Plone 3 Themes [article]
• Blogs and forums using Plone 3 [article]

• Plone 3 Theming [book]
• Creating, Installing and Tweaking your theme using Plone 3 [article]
• Skinner's Toolkit for Plone 3 Theming (Part 1) [article]
• Skinner's Toolkit for Plone 3 Theming (Part 2) [article]
• Add-on Tools and Theming Tips for Plone 3 [article]

• Practical Plone 3: A Beginner's Guide to Building Powerful Websites [book]
• Find and Install Add-Ons that Expand Plone Functionality [article]
• Structure the Content on your Plone Site [article]
• Safely manage different vesions of content with plone [article]
• Creating New Types of Plone Portlets [article]
• Show Additional Information to Users and Visitors of Your Plone Site[article]

Plone 3 Multimedia

Embed, display, and manage multimedia content in your Plone website

Published: May 2010
eBook Price: $26.99
Book Price: $44.99
See more

close

Select your format and quantity:

Book 01234567891011121314151617181920

eBook 01234567891011121314151617181920

About the Author :

Books From Packt