[TUTORIAL] - Attach Audio / Podcasting / Vidcasting / Image casting.

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[neon_eddy]

Tools you'll need. - I plan on doing a screencast of this sometime.

Ditto, MODx 0.9.5, ( a fresh install works fine)  Flash mp3/video/imagerotator all available here http://www.jeroenwijering.com/?item=Flash_Video_Player

we'll use ditto for the rss feeds. and maybe other things,

Our goals: Add a player to each page lets say you have an article with each podcast or audio. (optional of course).  to build an iTunes RSS/podcast from a folder of documents, with attached audio.

1. First make a TV (template variable)  to hold our url to the mp3 file.  Note: iTunes chokes on filenames with spaces, the flash mp3 player is fine, FYI. Name the TV "Audio" , and give it some sort of caption or description to your liking.  Set input type to "File".

So now we can attach a raw url to any page / set the templates to be accessed in the "template access" section.  I used both my main template and my front page one.

2 next we make a snippet to call the TV conditionally, in the page, no need to call it if there is no audio attached right? 

Code:

<?php
$output='';

$tvValue=$modx->getTemplateVarOutput('tvAudio',$modx->documentIdentifier);

if($tvValue['Audio']!='') $output.='<p id="player2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p><p><a href="'.$tvValue['Audio'].'">Download File NOW!</a></p><script type="text/javascript">
var FU = { movie:"/assets/flash/mp3player.swf",width:"250",height:"20",majorversion:"7",build:"0",wmode:"transparent",
flashvars:"file='.$tvValue['Audio'].'&repeat=False&showdigits=false&displayheight=0&lightcolor=0xb22450&backcolor=0x990000&frontcolor=0xFFFFFF&autoscroll=true" };
UFO.create( FU, "player2");
</script>';

return $output;
?>

ok , maybe that's confusing.  Let's go through it.

This code checks for our TV called "Audio" if it exists, it prints the flash mp3 player to the page.  In here is were you also can customize the flash player, lok into it's documentation or ask here.

Lets name this Snippet "AudioPlayer".

remember this line

Code:

movie:"/assets/flash/mp3player.swf",

  We need to upload that file as well.  It's in the zip file for the mp3 player from our wonderful friend over at http://www.jeroenwijering.com.

3.  One last thing to do and you'll have audio attached to a page. open your main template in the manager and add this to it [[AudioPlayer]] .. this will call the snippet, that calls the TV if present. and inserts a nice little player.

4. Ok lets PODCAST!
Make a Chunk and call it "podcast"
 put this code in it.

Code:

<item>
<title>[+title+]</title>
<link>[~[+id+]~] </link>


<itunes:album></itunes:album>
<description></description>
<pubDate>[+date+]</pubDate>
<enclosure url="[+tvAudio+]" type="audio/mpeg"/>
<itunes:author></itunes:author>
<itunes:subtitle></itunes:subtitle>
<itunes:keywords></itunes:keywords>
</item>

Sure maybe it could be trimmed.  I'm no expert. in fact I figured this out only a few weeks ago.

This chunk is used as a template for ditto.

Save, pass go, collect $200!


5. Now the rss feed and Ditto call.
Create a new document,  "uses template" should say "blank". page type should be xml in page settings.

Now paste this in there.

Code:

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:itunes="http://www.itunes.com/DTDs/Podcast-1.0.dtd" version="2.0">
<channel>

<title>[(site_name)]</title>
<link></link>


<category>Audio Blogs</category>
<language>en-us</language>
<copyright>© 2007 </copyright>
<generator>Wavestatic Studios</generator>


<ttl>60</ttl>

      <itunes:author></itunes:author>
      <itunes:subtitle></itunes:subtitle>
      <itunes:category text="Audio Blogs">
<itunes:category text=""/>

</itunes:category>
      <itunes:summary></itunes:summary>
      <itunes:owner>
      <itunes:name></itunes:name>
      <itunes:email>podcasts@herplaceradio.org</itunes:email>
      </itunes:owner>
      <itunes:explicit>no</itunes:explicit>
<image>

<url></url>
<title></title>
<link></link>
</image>
<itunes:image href="" />
[[Ditto?&startID=`50`&summarize=`5`&total=`5`&tpl=`podcast`]]
</channel>
</rss>

Set the startID to the folder where you are going to put your podcasts.


Some tips: if you are getting xml parsing errors, change the page type to html and debug from there.

A working example is here
http://herplaceradio.org
and now http://lifechurchmn.org/home

Using similar code and steps you can do the same with video or images.  on the lifechurch page I do just that, I have a image banner that is controlled by MODx, so I can have publish and unpublish dates.. SCHWEET!

This was developed for http://wavestatic.com - yes I will shamelessly plug my company :-)

Please post any questions or problems here so others can learn.

[rthrash]

Thanks for sharing that quite helpful tutorial.

[doze]

Wiki Wiki Wiki!! (Thanks!) 

[milicicd]

Wikified: http://wiki.modxcms.com/index.php/Attach_Audio_/_Podcasting_/_Vidcasting_/_Image_casting
Please update with any recent changes. Thanx!

[doze]

Sweet, thanks!

[neon_eddy]

I did make a change to let one specify an image to go along with the audio, and it shows up in the display window of the player, it's not too tricky, but let me know if anyone thinks it would be nice.

[doze]

You could write an additional wiki article on how to do that

[tweed]

Hi.....fabulous!
QUESTION :does anyone know if " specify an image to go along with the audio, and it shows up in the display window of the player"  modification was documented on the WIKI .... had a look and unable to find.... Could it possibly be posted here?

appreciated, obviously!

[neon_eddy]

Yea, I can post the code.. I thought  I did someplace...might not be until tonight...

[tweed]

BIG thanks!

looking forward to it. And as with everything in...life...er...no rush...

truly.

[neon_eddy]

New Snippet code

Code:

<?php
$output='';

$tvValue=$modx->getTemplateVarOutput('tvAudio',$modx->documentIdentifier);
$tvValueImage=$modx->getTemplateVarOutput('image',$modx->documentIdentifier);

if($tvValue['tvAudio']!='') $output.='<p id="player2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p><p><a href="'.$tvValue['tvAudio'].'">Download File NOW!</a></p><script type="text/javascript">
var FU = { movie:"/assets/flash/mp3player.swf",width:"300",height:"120",majorversion:"7",build:"0",wmode:"transparent",
flashvars:"file='.$tvValue['tvAudio'].'&image='.$tvValueImage['image'].'&repeat=False&showdigits=false&displayheight=100&lightcolor=0xb22450&backcolor=0x990000&frontcolor=0xFFFFFF&autoscroll=true" };
UFO.create( FU, "player2");
</script>';

return $output;
?>

then make a TV called "image" and have it's type be, you guessed it IMAGE.

[tweed]

Fantastic. Thank you.
I supposed one doesn't have to use the itunes bits. I'm thinking to simply use media on my hosted space.
I should read and think this through.
Much appreciated.

[neon_eddy]

Let me know if you have any issues.

[xefned]

Set the startID to the folder where you are going to put your podcasts.

modx newbie here.

I don't see a place to enter "startID." Can someone tell me how to find this setting and how to get the podcast content to appear in my template?

[neon_eddy]

startID is the folder number, in the manager it has numbers next to all folder and files, so where ever you have your podcasts at, use that containing folder number.

Each podcast is a new document, look at step 3 for how to get it to show up.  I know it's  complicated, but stick with it, once you "get it" you'll love it.