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:
- 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="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=example.mp3&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 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=example.mp3&autostart=yes"
tal:attributes="value string_src=${context/getId}&
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.
