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”/>

!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()

private function 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() {

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″>

Some CSS:



!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(){

function goStop(){


feel free to comment if you found this helpful.

Flex Simple Media Player

Creating a simple media player with Flex is not as hard as it sounds. In this tutorial I’ll go over the MXML code and some simple Action Script. In the next part I’ll describe more advanced functions such as repeat and playlist.

//First off with the MXML code:

<mx:Panel id=”mediaPanel” backgroundColor=”#2e2e2e” borderStyle=”solid” borderColor=”#4193DF” borderThickness=”2″
height=”80″ width=”280″ layout=”horizontal” alpha=”1.0″ headerHeight=”0.0″
roundedBottomCorners=”true” doubleClickEnabled=”true”
paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″ verticalScrollPolicy=”off” horizontalAlign=”center” top=”180″ x=”10″ dropShadowEnabled=”true”&gt

<mx:Canvas height=”100%” width=”100%” includeInLayout=”true” autoLayout=”true” borderStyle=”none” verticalScrollPolicy=”off”&gt

//some skining here would be usefull and better looking…
<mx:Button id=”stopButton” y=”10″ click=”stopPlaying();” styleName=”Button” x=”150″/&gt

<mx:Button id=”pauseButton” y=”10″ click=”pausePlaying();” styleName=”Button” x=”100″/&gt

<mx:Button id=”playButton” styleName=”Button” enabled=”true” click=”mediaPlay();” x=”50″ y=”10″/&gt



//Now some simple AS code, for the Play-Pause-Stop

import mx.core.SoundAsset;
import flash.media.*;

public var snd:SoundChannel = new SoundChannel();
public var pauseFlag:int=0;
public var pausePosition:int;
public var Sounds:Sound;
public var repSound:Sound;

//If we started playing from the beginning it simply plays the song, or if we paused first it resumes.
private function mediaPlay():void
var mySound:Sound = new Sound(new URLRequest(/assets/mySong.mp3));
snd = mySound.play();

//To Pause the sound channel we stop it and keep track of the timeline the stopping occured. Then we invoke Play from the exact spot we left off.
private function pausePlaying():void
pausePosition = snd.position;

public function resume():void
snd = Sounds.play(pausePosition);

//We invoke the sound channel to stop transmitting
private function stopPlaying():void

//I’ll get a working example up and running soon, until then Enjoy!