This article is the third and the final section of this article series. The following articles are the initial parts of the series.
(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:
- 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 , ...
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:
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"
<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>
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:
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"
<param name="movie" value="emff_lila_info.swf" />
<param name="bgcolor" value="#00ff00" />
<param name="FlashVars" value="src=example.mp3&autostart=yes" />
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"
data=" ++resource++emff/emff_lila_info.swf" width="200"
<param name="movie" value="emff_lila_info.swf" />
<param name="bgcolor" value="#ffffff" />
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.
(For more resources on Plone, see here.)
- As a standalone player for files with the filename extension .mp3
- As a playlist for folders containing MP3 files
- As a portlet
- 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:
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.
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.
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>
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:
If present, the audio will be loaded at page load will be and ready to run. autobuffer has no effect if autoplay is present.
If present, the audio will start playing as soon as it is ready.
If present, the user is shown some controls, such as a play button.
Defines the URL of the audio to play start
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:
The html5player.pt page template contains only one element:
<h4 tal:content="context/title" /> -
<h4 tal:content="audio_info/artist" />
tal:attributes="src context/absolute_url">An audio player
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.
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.
- 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]