Category Archives: music

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

</mx:Canvas&gt

</mx:Panel&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
{
if(pauseFlag==1)
{
resume();
}
else
{
snd.stop();
var mySound:Sound = new Sound(new URLRequest(/assets/mySong.mp3));
Sounds=mySound;
snd = mySound.play();
snd.addEventListener(Event.SOUND_COMPLETE,soundCompleteHandler1)
}
}

//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;
snd.stop();
pauseFlag=1;
snd.addEventListener(Event.SOUND_COMPLETE,soundCompleteHandler1)
}

public function resume():void
{
pauseFlag=0;
snd = Sounds.play(pausePosition);
}

//We invoke the sound channel to stop transmitting
private function stopPlaying():void
{
snd.stop();
}

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