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.

 
Download the EE Code for 30 - Hooking up the Wimpy Player in ExpressionEngine

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 Entry   

Next Entry >>

 

Previous Comments

Picture of Kevin

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

Mike Boyink

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.

Picture of Gaurav

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?

Mike Boyink

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.

Picture of Gaurav

by Gaurav

Date: Friday, December 26th, 2008
Comment: #5

Thanks a lot Mike. It was my silly mistake. Too much christmas wine I guess :)

Picture of Scott Harrington

by Scott Harrington

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.

Mike Boyink

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?

Picture of Scott Harrington

by Scott Harrington

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

Mike Boyink

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?

Picture of Scott Harrington

by Scott Harrington

Date: Monday, January 5th, 2009
Comment: #10

Sorry - below is an example of whats in one of the fields of a subsequent entry.

157.mp3

Picture of Scott Harrington

by Scott Harrington

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_))

Mike Boyink

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.

Picture of Scott Harrington

by Scott Harrington

Date: Monday, January 5th, 2009
Comment: #13

Perfect. Works a treat, thanks.

Picture of Rob Butz

by Rob Butz

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.)

Picture of Steven Grant

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?

Picture of Steven Grant

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}

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, February 26th, 2009
Comment: #17

Glad you figured it out!

Picture of John

by John

Date: Monday, September 14th, 2009
Comment: #18

Mike,

Is there any reason why you can’t just use the variables {audio_file} and {entry_id} in the initial embed code, rather than telling it to use “the-audio-file”, etc?

Isn’t that double work?  It seems like you are telling it to embed a variable of a variable, if that makes sense.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, September 14th, 2009
Comment: #19

Hey John -

Well, it is a variable of a variable. ;)  {audio_file} and {entry_id} are variables from the weblog:entries loop in the parent template.

They need to get passed to the embedded template - and to do that you need to use embed variables.

You could try something like

{embed="embeds/wimpy-button audio_file="{audio_file}" entry_id="{entry_id}"}} 

And it might work, but I like keeping my variables straight, and know that if I use the “my” prefix it’s effectively a pipe that I created to send other variable’s contents from one template to another.

Mike Boyink

by Mike Boyink (Author)

Date: Monday, September 14th, 2009
Comment: #20

Also - sometimes you are feeding things like {entry_id} to an embedded template that has another weblog_entries loop, and unless you use a different variable name it won’t be clear which entry_id variable you want where.

Picture of Shotwell

by Shotwell

Date: Thursday, April 8th, 2010
Comment: #21

Hey all,
This looks great, but what we’re stuck with now is a list of wimpy buttons that, when each is clicked, provides the user with a cacophony of sounds all at once. Any ideas on how to turn the others off when another is clicked?

Thanks!
Tyler

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, April 8th, 2010
Comment: #22

No - you’d have to talk to the Wimpy folks for that.

Picture of Shotwell

by Shotwell

Date: Thursday, April 8th, 2010
Comment: #23

Right, well I found out why I couldn’t find their docs covering the scenario: they’re all locked up in frames!

I pulled all their frames apart and put the list of relevant docs here:

http://www.shotwellcompany.com/blogwell/multiple-wimpy-buttons-playing-one-at-a-time

Thanks though Mike!
Tyler

Picture of Steven Grant

by Steven Grant

Date: Friday, April 9th, 2010
Comment: #24

Rather than using Wimpy which you need to pay for, I have successfully integrated http://5pieces.com/addons/flv-media-player/ which is free as opposed to Wimpy.

Happy to share the code for implementation if you’d like?

Picture of Maria Johnston

by Maria Johnston

Date: Saturday, October 23rd, 2010
Comment: #25

Hi Mike,

I’m using this tutorial to try to embed a swf (Flash movie) onto my EE but it’s not working.

I created the swf in Flash. When I open the Flash-generated html doc, it works fine. Then I uploaded the swf unto a folder called swf on my server. I have tried to use it my EE pages using the Flash-generated html code (with updated paths); I also tried the code you explain here (modified as needed); and finally, I tried an EE plugin called tkswfobjectembed. So far, nothing. I get a box with the dimensions of the swf but nothing plays.

Here’s some of the code I’ve tried:

<object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” width=“700” height=“500” id=“spectrum_logo” align=“middle”>
         
         
         
         
         
         
         
         
         
         
         
          <embed src=”{site_url}swf/spectrum_logo.swf” width=“700” height=“500” quality=“high” bgcolor=”#000000” pluginspage=“macromedia website url”  name=“spectrum_logo” />
         
        </object>

I would deeply appreciate it if you could point me on the right direction!

Picture of Maria Johnston

by Maria Johnston

Date: Saturday, October 23rd, 2010
Comment: #26

html I used doesn’t show on the comment I wrote. I will get rid of the tag symbols to force it to show, I hope you can get the picture:

object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” width=“700” height=“500” id=“spectrum_logo” align=“middle”
         

param name=“movie” value=”{site_url}swf/spectrum_logo.swf”
         
param name=“quality” value=“high”

param name=“bgcolor” value=”#000000”

param name=“play” value=“true”

param name=“loop” value=“true”

param name=“wmode” value=“window”

param name=“scale” value=“showall”

param name=“menu” value=“true”

param name=“devicefont” value=“false”

param name=“salign” value=”“

param name=“allowScriptAccess” value=“sameDomain”

embed src=”{site_url}swf/spectrum_logo.swf” width=“700” height=“500” quality=“high” bgcolor=”#000000” pluginspage=“macromedia url” type=“application/x-shockwave-flash”  name=“spectrum_logo”
         
/object


Hope it’s clear, I just stripped the tags off their greater-than and less-than symbols.

Picture of Steven Grant

by Steven Grant

Date: Sunday, October 24th, 2010
Comment: #27

Maria,
You don’t use your own Flash movie. You need to use wimpy player.

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, October 24th, 2010
Comment: #28

Hey Maria -

Usually these are pathing issues.  Check the rendered code of what EE is generating (and isn’t working) against the source code of the page that is.

Past that since this isn’t a question directly about the wimpy player tutorial I’d recommend a post in the EE forums.

Picture of London Sound Survey

by London Sound Survey

Date: Friday, March 25th, 2011
Comment: #29

Just a quick word of thanks for this fantastic tutorial. Two years ago I began building my website using your advice on how to use the Wimpy player with ExpressionEngine, and it’s served me fine ever since.

The only drawback has been the issue of the Flash object violating web standards, but otherwise no alternative I’ve checked so far works nearly as well as yours, and I think it’ll be a while before a suitable HTML5 audio replacement becomes along.

Best wishes,
Ian

Picture of Boyink

by Boyink

Date: Friday, March 25th, 2011
Comment: #30

Thanks Ian - glad to hear it!

Picture of Julia

by Julia

Date: Monday, June 13th, 2011
Comment: #31

Hi Mike, first off– thanks for this tutorial, it helped greatly to get the wimpy button functioning in almost all browsers… but of course the beloved IE is causing me trouble, as usual. I can’t figure out why it just doesn’t work in IE. Can you help? Here’s the link to the site I built using EE (with the help of your Small Business Book), and the Wimpy button: http://www.lothar-thiel.de/index.php/gesprochen
Any help is greatly appreciated! Thanks so much in advance, keep up the great work :)
Julia

Mike Boyink

by Mike Boyink (Author)

Date: Monday, June 13th, 2011
Comment: #32

Sorry..busy with an EE class this week. Try a post in the EE forums or see if Wimpy has support.

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>