Flash mp3 Player in new window

[Brendon Bauer]

Ok, here's what I want to do. I use Wordpress to host my podcast. I'd like to have a simple "template" of code that each post contains that all I have to do is change the Title and location of the mp3 to launch. What this code will then do is open a small popup window with a flash mp3 player and the title of the mp3. The mp3s are named according to the date, so I don't want that as the title. Instead I'd type the title I want to appear somewhere in the post.

I found this great flash player here: http://flash-mp3-player.net/players/maxi/

The test.php page contains only this code to get it working:

<object type="application/x-shockwave-flash" data="http://www.summitnorthwest.org/sermons/mp3player.swf" width="250" height="20">
    <param name="movie" value="http://www.summitnorthwest.org/sermons/mp3player.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=http%3A//www.summitnorthwest.org/sermons/2008/07.19.08.mp3&width=250&autoplay=1&autoload=1&showvolume=1&showloading=always&volumewidth=50&volumeheight=8&loadingcolor=B4B6B3&sliderovercolor=0052B6&buttonovercolor=0052B6" />
</object>

What I'd like is instead of imbedding bunches of mp3s that autoload into one wordpress page, to have a link that creates a small popup window containing the swf file linked to the mp3 and the title I provide right above it. What is the best way to do this? Javascript? And could someone write me some code that I could use?

Thanks!

Oh and one more thing... will feedburner be able to pull out the mp3s from this new flash method to work as a podcast as well? The old methods allows for that.

 

[EvanLugh]

- It may be easier to iFrame it then popup (and use the iframe as the red link shown below) that way you can include the flash player and set a background (black etc).
Copy this code into the HEAD of your HTML document

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=260,height=27');");
}
// End -->
</script>

The bold parts are for the height and width of the popup window, you can change this accordingly, although I measured it at the above.

Use the following link to open the new window

<A HREF="javascript:popUp('[COLOR="Red"]www.summitnorthwest.org/sermons/2008/07.19.08.mp3[/COLOR]')">Listen to the podcast</A>

OR the way I'd do it:
HEAD the same( including the width etc show in the quote tags)
but change the link code to:

<A HREF="javascript:popUp('[COLOR="Red"]www.summitnorthwest.org/podcasts.html[/COLOR]')">Listen to the podcast</A>

Then create podcasts.html with your flash and select the particular podcast manually every week/month etc.
Hope I didn't confuse you.

 

[Brendon Bauer]

I'm confused. Where in your code do you include the .swf player?

 

[Brendon Bauer]

Also, I don't want to have a podcast.html page that only references the most recent mp3. I want to be able to have all the links on the page be able to open into a small popup window with the swf player to play the mp3s. That way people can go back and listen to something that's older... Don't have to listen to just the most recent one. As you can see I already have that function, but it just embeds the mp3 in the browser, and Windows Media Player doesn't always work for some reason.

 

[Brendon Bauer]

I actually figured it out! I modified the old javascript file I was using so that it passes the same parameters so even the older sermons are now using flash. Didn't have to change a post in Wordpress. Just modified the js file to use the swf object. It's pretty sweet! And I think it still keeps the mp3 for feedburner podcast support.

 

[EvanLugh]

Glad you got it sorted.. And the HTML page could display anything (multiple swfs) for example.