30 - Hooking up the Wimpy Player in ExpressionEngine
The Flash-based Wimpy Player is a slick, simple way to let web site visitors listen to .MP3 files right on your website. In this chapter I’ll cover how to implement it within ExpressionEngine as a way to let visitors to the church site listen to the audio messages.
While Wimpy has extended their product offering to more advanced and feature-rich media players, I like the simplicity of the simple Play button. Getting it hooked up to the existing ExpressionEngine-based implementation of the Church site audio section is really straightforward. Here’s the overall process:
- Download the Wimpy Player
- Upload Wimpy files to your webserver
- Use the Wimpy site to generate sample HTML
- Make the HTML Reusable
- Update EE templates
Download the Wimpy Player
You can download Wimpy Player button here (and yes, that is an affiliate link - if you end up buying the a Wimpy product you can help support Train-ee by using it). Note that the download will time out after 15 days if you don’t purchase the button.
Upload the Wimpy Files to Your Webserver
After unzipping the Wimpy archive locally, there are three files that will need to be loaded to the webserver: wimpy_button.swf, wimpy_button.js, and example.mp3. I can put these wherever I want on my webserver, as in a following step I’ll create HTML that will contain the paths to these files. I have separate folders for swf, js, and audio files so chose to split the thee files up by file type. Another way would be to keep them together in a /wimpy folder.
Use the Wimpy Online Customizer to Generate Sample HTML
With the files now in place I need some HTML. I used Wimpy’s Online Customizer to generate some starter HTML to work with. The Customizer lets you specify the paths to the files and the size/background color of the play button. You can test your paths to make sure everything works before generating the HTML.
Once I verified my paths were correct and chose the appearance of my button, Wimpy Generated this Code:
<!-- Wimpy Button Code -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,47,0" width="50" height="50" id="wimpy_button_97019" name="wimpy_button_97019" >
<param name="movie" value="http://church.train-ee.com/swf/wimpy_button.swf?theFile=http://church.train-ee.com/audio_files/example.mp3&wimpyReg=NXMlNUJBJTdDdiU3Q3NzJTdGSyU4MVhJSGwlMjglM0QlNUMlN0ZsS3Jla1glNUNiY1lw " />
<param name="quality" value="high" />
<param name="bgcolor" value="#6A7A95" />
<embed src="http://church.train-ee.com/swf/wimpy_button.swf?theFile=http://church.train-ee.com/audio_files/example.mp3&wimpyReg=NXMlNUJBJTdDdiU3Q3NzJTdGSyU4MVhJSGwlMjglM0QlNUMlN0ZsS3Jla1glNUNiY1lw " width="30" height="30" quality="high" bgcolor="#6A7A95" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="wimpy_button_97019" /></object>
<!-- End Wimpy Button Code -->
Note that I purchased the button, so was able to also enter the registration code. If you’re just evaluating the button you won’t need to do that until you actually buy it.
If you paste that code to a template on your site and render it, you should get a Play button that when clicked plays the example.mp3 audio file. This is great - except that the file name of the mp3 file tp play is hardcoded. I’ll have multiple .mp3 files that I need to play and the file names will be stored in a weblog post in ExpressionEngine. What to do?
(Insert long pause here….in hopes that an idea will come to you before I suggest it….)
Making the HTML Reusable
In ExpressionEngine, anytime you are in a situation where most of a chunk of code will work all the time but a few parts of it need to change each time you should look to an Embedded Template with an Embed Variable. Creating an Embedded Template from this code means it only gets stored once within EE, and by making the file name portion of the code an Embed Variables means I can “pass in” the file name I want the player to be connected to.
So I created a new embedded template named embeds/wimpy-button and pasted in the HTML that the Wimpy Online Customizer generated. I then edited the HTML and replaced the hardcoded “example.mp3” references with:
{embed:the-audio-file}
There is one other thing I need to accommodate with an embed variable. According to the Wimpy Docs, if I have multiple buttons on one page, they each need a unique name and ID. Since I’ll be pulling the Wimpy code in within a EE weblog:entries tag, I’ll have the entry_id variable that will be unique for each post within the audio-messages weblog, and can pass that into embeds/wimpy-player to create a unique name and ID each time. So I edited the Wimpy HTML to replace all “wimpy_button_97019” references with:
wimpy_button_{embed:the-entry-id}
Here then is my final version of embeds/wimpy-button:
<!-- Wimpy Button Code -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,47,0" width="50" height="50" id="wimpy_button_{embed:the-entry-id}" name="wimpy_button_{embed:the-entry-id}" >
<param name="movie" value="http://church.train-ee.com/swf/wimpy_button.swf?theFile=http://church.train-ee.com/audio_files/{embed:the-audio-file}&wimpyReg=NXMlNUJBJTdDdiU3Q3NzJTdGSyU4MVhJSGwlMjglM0QlNUMlN0ZsS3Jla1glNUNiY1lw " />
<param name="quality" value="high" />
<param name="bgcolor" value="#50090D" />
<embed src="http://church.train-ee.com/swf/wimpy_button.swf?theFile=http://church.train-ee.com/audio_files/{embed:the-audio-file}&wimpyReg=NXMlNUJBJTdDdiU3Q3NzJTdGSyU4MVhJSGwlMjglM0QlNUMlN0ZsS3Jla1glNUNiY1lw " width="30" height="30" quality="high" bgcolor="#50090D" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="wimpy_button_{embed:the-entry-id}" /></object>
<!-- End Wimpy Button Code -->
Update EE Templates
All that’s left (besides some CSS work that I won’t cover here but will just include in an updated stylesheet) is to update audio-messages/index and audio-messages/comments to now call embeds/wimpy-button and pass in the two necessary variables.
Here’s the code I added (note this is within the weblog:entries loop):
<div class="wimpy_player_right redBorder">
<h5>Play this Message</h5>
{embed="embeds/wimpy-button the-audio-file="{audio_file}" the-entry-id="{entry_id}"}}
</div>
The Results
You can view the finished product on my example church site. I’m just using short example mp3’s for simplicity but you’ll get the overall idea. Now that I look at the page if this were a client site I’d probably go back and add a “length” field to the audio-messages weblog so people would know how much time they’d need to listen to the whole message.
Next up I’ll cover creating an actual Podcast feed that will allow more tech-savvy visitors the ability subscribe to the church messages, and download new ones them automatically.
Note/Update: A reader in the EE forums noted that Wimpy offers a plug-in designed for ExpressionEngine - if you’ve used that I’d like to hear about it.
Category Navigation
Previous Comments
by Mike Boyink (Author)
Date: Wednesday, December 10th, 2008
Comment: #2
Hi Kevin - thanks for the comments. We don’t get that cold, but being along Lake Michigan we tend to get more snowfall. Or, like yesterday, rain, freezing rain, sleet and snow all in the same day…
Once the staff part of the site has been implemented I’ll come back to this and add a relationship field such that the pastor will be associated to a message that way.
Since we’re putting in the Scripture passage that would be searchable via a simple text search.
You could go further and create a weblog of books of the Bible and use relationships, that would net you a page where each book of the Bible would be a heading and individual messages showed under it—but that’s more complex than I’m going to do here.
I think more valuable would be getting the messages transcribed, then posting that text in another field such that any search for any text, phrase, or Bible verse mentioned during the sermon would find the relevant message (in addition to providing more resources for the hearing-impaired). I might look into that for my own church next year.
by Gaurav
Date: Friday, December 26th, 2008
Comment: #3
Where can we see cintents of the variables {entry_id} in EE?
Also all the audio files on my server are in a folder called ‘videos’. I have tried to output the contents of my variable as the-audio-file=”{audio_file} and also the-audio-file=“videos/{audio_file}. But when I press my ‘Play’ button it does not play anything. Could you please help me?
by Mike Boyink (Author)
Date: Friday, December 26th, 2008
Comment: #4
The first question can be answered by searching the EE docs..;)
On the second question, did you first use the Wimpy tool to verify your paths?
If so, you should be able to view the rendered source code out of EE and see what your paths are, and compare them to the Wimpy paths to find where they are not correct.
by Gaurav
Date: Friday, December 26th, 2008
Comment: #5
Thanks a lot Mike. It was my silly mistake. Too much christmas wine I guess :)
by (JavaScript must be enabled to view this email address)
Date: Monday, January 5th, 2009
Comment: #6
Hi and thanks for this tutorial, found it really useful although I couldnt seem to get the audio files to load correctly…for some reason EE renders the link as below….
I followed the tutorial exactly to how you put it but it seems to truncate….any ideas would be appreciated.
by Mike Boyink (Author)
Date: Monday, January 5th, 2009
Comment: #7
Hey Scott - do you have just the file name of the audio file in the weblog field?
by (JavaScript must be enabled to view this email address)
Date: Monday, January 5th, 2009
Comment: #8
Hey, thanks for the prompt response…basically I have around 50 mp3 samples that I would like the button to load, according to the entry post.
Here is what I’ve placed within a div as per your tutorial
{embed=“embed/small_button the-audio-file=”{artist_voiceover}” the-entry-id=”{entry_id}”}
And here is part of the embed I used for the flash
param name=“movie” value=“http://www.struttandbuckley.com/assets/swf/wimpy_button.swf?theFile=http://www.struttandbuckley.com/images/uploads/{embed:the-audio-file}”
However, when I view the source on the actual site itself, it renders it oddly
Any help or guidance would be appreciated
by Mike Boyink (Author)
Date: Monday, January 5th, 2009
Comment: #9
Yes - what I’m after is what is the text in the weblog field—artist_voiceover - it looks like? Is it just the filename of the audio file? Or does it contain more than that?
by (JavaScript must be enabled to view this email address)
Date: Monday, January 5th, 2009
Comment: #10
Sorry - below is an example of whats in one of the fields of a subsequent entry.
by (JavaScript must be enabled to view this email address)
Date: Monday, January 5th, 2009
Comment: #11
Apologies, I see that the forum interpets the html…its as below within the brackets and underscore so it displays…
((_157.mp3_))
by Mike Boyink (Author)
Date: Monday, January 5th, 2009
Comment: #12
Yep - all you want is just the file name, no file_dir variable. That’s what this setup assumes.
by (JavaScript must be enabled to view this email address)
Date: Monday, January 5th, 2009
Comment: #13
Perfect. Works a treat, thanks.
by (JavaScript must be enabled to view this email address)
Date: Monday, February 2nd, 2009
Comment: #14
I’m attempting to build on to your tutorial by getting Wimpy to play from an EE-created XML playlist. Back at you when I’ve got it figured out (it doesn’t seem to want to load for some reason at the moment.)
by Steven Grant
Date: Thursday, February 26th, 2009
Comment: #15
Mike,
Trying this on http://www.greenviewevangelicalchurch.co.uk/index.php?/audio/ and although the player appears, no music can be heard.
Here’s the embed on that page: {embed=“inc/wimpy-button the-audio-file=”{audio_file}” the-entry-id=”{entry_id}”}
button code is as you provided.
anyt thoughts as to why it won’t play?
by Steven Grant
Date: Thursday, February 26th, 2009
Comment: #16
sorted it: I had to remove my domain from theFile part and just leave theFile={embed:the-audio-file}
by Kevin
Date: Wednesday, December 10th, 2008
Comment: #1
Mike,
I don’t know about you, but up in Canada we now KNOW it’s officially winter .... 6.8F (-14C) is our average for the next week. Doh!
Thanks for spending a few weeks on the media/audio portions of a site. If anything, this would be CONSISTENT weekly content that the visitor would know would be NEW and not STATIC/dead!
One thing that I really wonder is WHAT exactly would our visitors search for on our site, and build search around THAT! Regarding online media/audio, the way you are building the site, are you able to sort/search by Scripture passage (something that might be very useful when you get a larger library)? Could you sort by speaker (or will this come up with “relationships” in the future)?
Thanks for putting so much thought into this series. Once I saw Sean Sperte’s EE audio ideas (http://tinyurl.com/eesermonaudio) I really got excited when you got to this section, and wanted to see your approach! Looking forward to the next episode!
Kevin