Flex audio player with Flowplayer core

I’ll present a simple task that allows to implement the power of the flex framework and flash graphics to a equally powerful core player such as the Flowplayer, bridged with JQuery.

First of all let’s create the graphics for the player, lets assume you have some basic images for the buttons and the background:

<s:Group width=”338″ height=”39″>
<s:Image source=”assets/playerBack.png” smooth=”true” width=”338″ height=”39″/>
<s:Image source=”assets/play.png” smooth=”true” left=”20″ top=”10″ click=”goPlay()” useHandCursor=”true” buttonMode=”true”/>
<s:Image source=”assets/pause.png” smooth=”true” left=”50″ top=”10″ click=”goStop();” useHandCursor=”true” buttonMode=”true”/>

<s:HSlider horizontalCenter=”20″ top=”10″ width=”178″ maximum=”1″ minimum=”0″ showDataTip=”false” stepSize=”0.1″ skinClass=”Skinz.VolumeSkinClass”/>
</s:Group>

!Note: make the <s:Application/> slightly bigger and opaque (height=”45″ width=”360″ backgroundAlpha=”0.0″)

!Note:make sure to include Jquery to your HTML file, I created this with JQuery.1.5.min.js

now a little bit of AS3 script to trigger the Javascript

private function goPlay()
{
ExternalInterface.call(“goPlay”);
}

private function goStop()
{
ExternalInterface.call(“goStop”);
}

Now export a release build and copy the .swf file in your HTML Project folder.

Our Flowplayer lives on a <div/>

<div id=”audiosecure” style=”display:block;” href=”http://releases.flowplayer.org/data/fake_empire.mp3″></div>

!Note: placing it on a div without size makes it invisible but still functional. cool huh!?

Create the flowplayer:

// install flowplayer into container
$f(“audiosecure”, “flowplayer/flowplayer.commercial-3.2.5.swf”, {

// fullscreen button not needed here
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false
}
},
clip: {
autoPlay: false,

// optional: when playback starts close the first audio playback
onBeforeBegin: function() {
$f(“audiosecure”).close();
}
}
});

Our SexyPlayer :

<div id=”sexyPlayer”>
<object width=”360″ height=”45″ wmode=”transparent”>
<param name=”movie” value=”css/assets/player/Action24Player.swf”>
<embed src=”css/assets/player/Action24Player.swf” wmode=”transparent” width=”360″ height=”45″>
</embed>
</object>
</div>

Some CSS:

#audiosecure
{
position:absolute;
left:150px;
top:100px;
}

#sexyPlayer
{
position:absolute;
left:150px;
top:10px;
z-index:9999;
}

!Note: make sure to place the Flowplayer lower than sexyPlayer

Throw in a couple of JS functions and you’re good to go:

function goPlay(){
$f(1).stop();
$f(0).play();
}

function goStop(){
$f(1).stop();
$f(0).stop();
}

Enjoy!

feel free to comment if you found this helpful.

Bookmark the permalink.

2 Responses to Flex audio player with Flowplayer core

  1. Pingback: Tweets that mention Flex audio player with Flowplayer core | Nightly Coding; -- Topsy.com

  2. Many thanks for taking the time to discuss this, I really feel strongly about it and love learning much more on this topic.

Leave a Reply

Your email address will not be published. Required fields are marked *