32 - Integrating Hipcast & ExpressionEngine to Deliver Church Audio Messages

In earlier posts I’ve covered how to build a church podcast / audio messages section using all native ExpressionEngine functionality.  In this post I’ll cover how to provide similar functionality on the EE, but outsourcing the hosting and delivery of the audio files to a 3rd party Application Service Provider (ASP) specifically Hipcast. The bridge between ExpressionEngine and Hipcast is EE’s Metaweblog API Module which, once configured, will allow Hipcast to post programmatically into EE.

 

Note: If you’re just coming into this series and are wondering what the advantages and disadvantages are of the native EE approach vs. the 3rd party ASP approach please review this podcasting kickoff post.

Oh - and another note before beginning.  The Hipcast player will be inserted into your site via an iFrame.  iFrames are not part of the XHTML strict specification, so if you’re shooting for a validating XHTML site you’ll either need to live with the message audio page not validating or choose an alternate implementation approach.

My feeling is that there are times when code validation isn’t the highest goal for a site, and this is one of them.  The Hipcast offering is really great for churches - providing a low cost, easy to manage and easy to consume option for sermon audio delivery—which is more valuable to me than a green favicon and pat on the back from the W3C.

Well, ok. One more thing before jumping in.  Just one - I promise.

I’ve spent a fair amount of time covering the implementation of a audio messages section for the site, completely overlooking the accessibility of only offering messages in audio format.  One of my goals for my church website for 2009 is to investigate finding a transcription service who would provide us text transcripts of the audio messages that we’ve uploaded.  I’m hoping this is one area where the ability to outsource that function will be affordable for our little church.  My thought is I’d just add a textarea field to the weblog holding the audio versions and paste that text in - for the benefit of hearing-impaired site visitors, search engine indexing, and those who (like myself) might prefer to read the transcript vs. listening to the podcast.  If anyone has experience with a transcription service I’d appreciate hearing about it.

Allrightythen….let’s get on with it.

The big steps in this process will be:

In ExpressionEngine:

  • Creating a data container
  • Setting up a Hipcast-specific member group
  • Creating a login for Hipcast to use
  • Creating a new Metaweblog API Configuration

In Hipcast:

  • Adding a Blog
  • Configuring the Audio Player
  • Setting up a Podcast
  • Publishing audio

Back in EE:

  • Coding the template


Starting in ExpressionEngine - the Data Container
I’ll start this on the EE side - the first thing I’ll need is a data storage container (currently “weblog”, in the future think “channel”) for posts that will contain the content coming from Hipcast. All I I really need is a title field and a textarea field.  The textarea field will store the code for the flash player and any other text inserted from the Hipcast side.  If I were doing this in the Train-ee Church site I’d use the Audio Messages weblog and just change the “audio_file” field that I created from a text input to a textarea.  On my own church site I just added a field to the default field set, since the audio messages just flow in with the rest of the items posted to the home page blog.

Wherever you choose to create your textarea field, make sure of two things:

  • The field formatting on the field that will hold the Hipcast audio player is set to “none”
  • The target weblog has “Default HTML formatting in section entries” set to “Allow All HTML”. This setting is found under Admin ›  Weblog Administration ›  Weblog Management › Weblog Posting Preferences”

The reason for this is that Hipcast needs to insert some HTML into an EE post in order for the Flash-based audio player to work, and I want EE to allow it and not mark it up additionally.


Setting Up a New Member Group
In order for the Hipcast to EE publishing process to work automatically, Hipcast will need to login to EE.  We’ll get to creating a specific user account in a moment - first what I like to do is create a Hipcast-specific member group in ExpressionEngine.  This is really for my own piece of mind more than a technical requirement—I only want Hipcast to have access to the weblog where I want the audio files published.  Setting up a new member group lets me lock it down to just access to the one weblog for publishing and nothing else.

Creating a new member group is begun in the EE Control Panel at Admin ›  Members and Groups ›  Member Groups › Create a New Member Group.  From there it’s a matter of working through the options on the left and setting things up:

Member Group Name
Hipcast

Member Group Description
This member group is used to contain a login that Hipcast uses to post audio files to ExpressionEngine. It should only have one member.

Security Lock
Locked

Site Access
Leave defaults (Yes to view when site is online, No when it’s offline)

Member Account Privileges
Set all to No

Comment Posting Privileges
Set all to No

Search Privileges
Set to no

Private Messaging Privileges
Set all to no

Control Panel Access
Set to No

Control Panel Area Access
Set all to No

Control Panel Administration
Set all to No

Control Panel Email Privileges
Set all to No

Weblog Posting Privileges
Set all to No

Weblog Assignment
Set all to No with the exception of the weblog you’ve setup to hold your audio messages - set that one to Yes

Comment Administration
Set all to No

Template Editing Privileges
Set all to No

Module Access Privileges
Set all to No


Register a New Member
Now under   Admin ›  Members and Groups ›  Register a New Member create a new user account.  Make a note of the user name and password, as you will need them later in Hipcast.  Also - if your EE site is displaying the screen name of the author associated with a post, the value you enter here in Screen Name will be what appears on your site.  On my church site this is “Audio Blogger”.

Be sure to assign this new member to the member group you just created in the step above.


Create a new Metaweblog API Configuration
Now for the good stuff - creating a new Metaweblog API configuration.  If you are not familiar with the Metaweblog API I’d suggest starting with the EE Docs on the subject, and branching out from there with a Google search if need be.  Essentially what the Metaweblog API will do is allow Hipcast to push content into EE remotely—this is the connection point between the two.

The Metaweblog API is a module, so it’s found in the EE Control Panel at Admin ›  Modules ›  Metaweblog API.  The module is not installed by default so you will need to click the “install” link found on the right of your screen.  Once installed click the Module Name to enter the configuration area.  It will have a default configuration but I like to create a Hipcast-specific one.  Click the “Create New Configuration” button and use the following configuration settings:

Configuration Name
Hipcast

Text Formatting Preference
I haven’t found the setting here to be important for a Hipcast integration -it seems to work the same set either to Yes or No.

Entry Status
If you want the entries coming in from Hipcast to be published immediately, set this to Open.  If you want someone to review/approve them first then set this to either Closed or another Status value (if you’ve set that up.  I’ve not covered that in this series yet, and for my church just specified Open so the process requires fewer clicks).

Weblog Field Group
Choose whatever group is assigned to your Audio Messages weblog, and contains the field you configured above.

Excerpt Field
Not used by Hipcast.

Content Field
This field is the important one - this is the field that Hipcast will use to contain the Flash audio player, as well as any descriptive text you add.  Point this to the audio file field you configured above.

More Field
Not used by Hipcast.

Keywords Field
Not used by Hipcast.

Upload Directory for File Uploading
None.

Click Submit.

EE should now reload the initial screen showing the Metaweblog API configurations.  It should have generated a new URL that will look something like:

http://yourdomainhere.com/index.php?ACT=47&id=1 

This URL is known as the “XML-RPC URL” by Hipcast.  Copy it to the clipboard or a Notepad doc - you’ll need it shortly.


Onto the Hipcast Configuration
You’ve now done most of the work in ExpressionEngine.  Let’s move to the Hipcast side of the fence.


Get Signed Up

You’ll need a user account on Hipcast -either sign up or log in.

Connect Blog

  • Click Blogs in the Hipcast main navigation, then Add new Blog in the subnav.
  • Enter a Service Name - I just use the name of the EE site that I’m working on
  • Choose “ExpressionEngine” from the Blog Service Provider drop-down
  • Enter the URL that EE generated a moment ago in the XML-RPC URL field
  • Enter the username/password that you created in EE
  • Your Audio Messages weblog should show in the Hipcast interface.

Configure Audio Player
For each blog Hipcast will let you configure the appearance and some options of the audio player and set default post titles (which can be overwritten later).  This is where I usually configure colors of the player so that it fits in well with the EE site.  Also note that under “Player Features” is the option to also offer a link to directly download the MP3 - handy for folks with portable MP3 players that might not be into full-blown podcasting.  Also note that under the Category tab, Hipcast will pull your EE categories - but you can only set this once for each blog (vs. being able to choose with each uploaded audio file).

That configuration handles listening to the audio file on the site or downloading the MP3.  You’ll also want to offer a true Podcast so let me run you through that setup as well.

Setup a Podcast

  • Click the Podcasts option in the Hipcast main navigation
  • Click the New Podcast option in the subnav
  • Fill in the form as presented
  • Once submitted, Hipcast will provide you a link to use on your site.

Publish Audio.

  • With some Hipcast setup done, you can now publish some audio to test the process
  • Click the Audio link in the Hipcast main navigation
  • Assuming you have recorded the audio file offline and just need to upload it now, select the Upload Audio link
  • Select the file, enter a title & description.  All this content will come through into the EE field that you mapped under the Metaweblog API “Content” field.
  • Note that the author shown in Hipcast is not necessarily the author that will show in EE.  In EE it will be the name of the EE account that Hipcast uses to login with
  • Choose streaming speed
  • Choose to publish the audio file to both the blog and podcast

Once the file is uploaded Hipcast will use the Metaweblog API to publish a new post in your EE site, which will contain the title/description you entered in Hipcast, and will contain the Flash-based audio player for immediate playback.


Almost There
But what - hey?  The player doesn’t come through correctly?

Yep - there’s a bit of a roadblock here.  ExpressionEngine is big on security, and as it turns out the template parser doesn’t like the code that Hipcast generates.  EE will change some of the Hipcast HTML to entities so such that:

< > 

becomes:

lt; & gt

(spaces inserted for display purposes here)

The trick here is to use the Find and Replace Plugin to undo that work in this case, looking for the entities and changing them back to HTML.  This plugin is not installed by default - if you need a review of how to do that you can find that here.  Once that’s installed you then will have some new tags available in your EE templates.  Here’s the relevant code from my church site:

{if audio_file !=""}
{exp
:replace find="& lt;|& gt;" replace="<|>" multiple="yes"}{audio_file}{/exp:replace}
{
/if} 

(again, remove the spaces between the apostrophe and text in the “find” parameter.)

With that code in place, you should now have a working church audio messages section, offering site visitors the ability to listen to the sermon right there on the page, download the MP3 for use locally, or subscribe to a podcast.  Hipcast will bear the brunt of the bandwidth and the publish process is very straightforward.

Hipcast Moblog
While here I do also want to point out that once this is setup you can also use Hipcast for a telephone-to-the-web audio moblog.  If you explore the Hipcast My Moblog area under the Audio section, you see that they offer you a phone number you can call to record an audio moblog post.  This might be cool for times when your church members are off on mission trips - if they have cell coverage they could literally “phone it in” from the field.  If they have wi-fi but no cell coverage then you might investigate using Skype in connection with Hipcast such that they could initiate the call from a laptop instead. Imagine the power of hearing from them while they’re in the field vs. weeks later after the fact.

What’s Next?
Next up on the church site project will be the Staff Directory. Once that’s in place I can connect it back to the Audio Messages section such that each Message will be linked to the profile of the pastor who delivered the message.

It’s also late afternoon on New Years Eve as I write this - so if you are reading it yet today Happy New Years to you and yours!

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of parsoncraig

by parsoncraig

Date: Friday, January 2nd, 2009
Comment: #1

Thanks for this, Mike.  The transcription service is an excellent idea, and I hope someone will share here recommended services.

Picture of parsoncraig

by parsoncraig

Date: Friday, January 2nd, 2009
Comment: #2

Excellent idea for the use of the Moblog, Mike.  I will do that, too. 

You might want to edit your post to choose either audio_file or audio_link.  At the top you suggest the former, and in the find and replace code you use the latter. 

Again, thanks for this.  Works like a charm!

Craig

Mike Boyink

by Mike Boyink (Author)

Date: Friday, January 2nd, 2009
Comment: #3

Ah - that’s what I get for coping the code from my church site.  Thanks.

Picture of Matthew

by Matthew

Date: Tuesday, June 9th, 2009
Comment: #4

I am actually transcribing the audio files myself. It is a great idea because it also helps with SEs indexing your content.

I had a quick question for you Mike. I followed this to the letter about 4 months back and got this to work. Since then I changed hosting accounts as well as domains. When I went to use my hipcast account to publish to my blog it didn’t work. I put all my updated info including the API url and the member login but no dice. Have you had any trouble with Hipcast? I’m thinking of going to their sister company BYOAudio and just manually inputing the audios into my blog posts.

Any advice or guidance would be most helpful. Regards,
Matthew

Mike Boyink

by Mike Boyink (Author)

Date: Tuesday, June 9th, 2009
Comment: #5

Hey Matthew -

Hipcast has been rock-solid for us.  I’d suggest contacting their tech support.

Picture of Matthew

by Matthew

Date: Tuesday, June 9th, 2009
Comment: #6

Cool, I’m glad to hear it. In the meantime since I was having trouble with the Hipcast have signed up for a trial of BYOAudio (started by HIpcast’s founder). It is pretty much the same except there is no auto push to a blog. And in the way of streaming services it kicks butt. So if I don’t get the other sorted, I may really like their sister service. FYI. Thanks for such awesome tutorials. I practically built my site around them. Thank YOU!

Picture of Craig

by Craig

Date: Saturday, March 6th, 2010
Comment: #7

Could you post your template code? I’ve followed this to a “T” twice and my EE page still doesn’t pull back the audio from Hipcast. Hipcast connects to my blog “Media”.

Picture of Craig

by Craig

Date: Saturday, March 6th, 2010
Comment: #8

Rookie mistake. I didn’t change the fieldname in the if statement to reflect the name on my church site.

On another note, I too want to thank you for your service to my church. I would not have been able to provide as powerful a site without the training that you have given me through this site. May the Lord richly bless you.

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>