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.

Flowplayer auto focus with JS (FF too)

I was asked to find a way to enable auto focus on flowplayer without the user to click anything at all. After much search and thought… I figured out an easy way to do this using the Flowplayer API and JS.
In this example I give auto focus the moment the player is done loading in HTML and by pressing num-key: “2” it toggles FullScreen.

note: This works on Firefox too.

("player", "../flowplayer/flowplayer.commercial-3.2.5.swf", {
clip: {
url: 'SOMEURL',
provider: 'rtmp',
if(e == 50){
plugins: {
rtmp: {
url: '../flowplayer/flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://SOMEURL'

Special thanks to @Havoc24k

Communicate with JavaScript, send-receive

Actually its quite simple to communicate with Javascript from Flash, simply by importing the externalInterface library. The following code displays a simple use, from which the Javascript “reads” the available space within the browser window and sends it to the flex application, which draws a panel to match this space, so you can have a full screen application no matter the screen resolution and/or browser…

&lt?xml version=”1.0″ encoding=”utf-8″?&gt

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” viewSourceURL=”srcview/index.html”&gt

import mx.controls.Alert;
import mx.events.*;
import mx.controls.*;
import flash.external.*;

public var w:uint;
public var h:uint;
public function callWrapper(event:MouseEvent):void

var jsWidth:String = “getWidth”;
var jsHeight:String = “getHeight”;
w = ExternalInterface.call(jsWidth);
h = ExternalInterface.call(jsHeight);

public function original():void

<mx:Resize id=”resizeMe” target=”{testPanel}”/&gt

<mx:Canvas height=”100%” width=”100%”&gt

<mx:Button label=”Expand!” click=”callWrapper(event);” horizontalCenter=”0″/&gt

<mx:Panel id=”testPanel” width=”200″ height=”300″ backgroundColor=”#BDE018″ y=”0″ x=”0″ borderStyle=”none”&gt
<mx:Button label=”Return” click=”original();”/&gt



add this 2 functions to your html that contains the produced .swf

<script language=”JavaScript” type=”text/javascript”&gt

function getWidth() { return document.body.clientWidth; }
function getHeight() { return document.body.clientHeight; }

View working example here