How to use the Feathers
SoundPlayer class provides audio playback capabilities using a
flash.media.Sound object. Sound files may be loaded from a URL or any
Sound object may be passed in. Media player controls may be added as children to display information such as the current time or to control playback by seeking or pausing the audio.
SoundPlayer is a subclass of
LayoutGroup, so its children may be positioned and sized using layouts.
First, let's create a
SoundPlayer component and add it to the display list:
var player:SoundPlayer = new SoundPlayer(); this.addChild( player );
To play a sound file, pass the URL (or a
flash.media.Sound object) to the
player.soundSource = "http://example.com/sound.mp3";
Next, we'll add some components as children to control playback.
Let's give the
PlayPauseToggleButton and a
SeekSlider. It's as simple as adding them as children of the
var button:PlayPauseToggleButton = new PlayPauseToggleButton(); player.addChild( button ); var slider:SeekSlider = new SeekSlider(); player.addChild( slider );
There's no need to add event listeners for these controls. You simply need to add them as children of the
SoundPlayer, and everything will be set up automatically.
In the next section, we'll position these two children using a layout.
SoundPlayer supports using layouts to automatically position and size its children. Let's pass a
HorizontalLayout to the
layout property of the
var layout:HorizontalLayout = new HorizontalLayout(); layout.gap = 10; group.layout = layout;
Here, we've set the
gap property, but
HorizontalLayout provides many more useful features, including padding and alignment. See How to use
HorizontalLayout with Feathers containers for complete details.
If we want our
SeekSlider to stretch to fill as much space as possible within the
SoundPlayer, we can pass in
var sliderLayoutData:HorizontalLayoutData = new HorizontalLayoutData(); sliderLayoutData.percentWidth = 100; slider.layoutData = sliderLayoutData;
Now, because we've set the
percentWidth property, when the width of the
SoundPlayer changes, the width of the
SeekSlider will change too.
Controlling playback programmatically
By default, the
SoundPlayer will automatically start playing its
soundSource. We can use the
autoPlay property to change this behavior:
player.autoPlay = false;
autoPlay is set to
false, we can call
play() to begin playback manually:
To pause, we can call
pause() to pause playback at the current position:
togglePlayPause() method may be called to toggle between the play and pause states:
To stop playback and return the sound to the beginning, we may call
seek() function may be called to change the current time:
player.seek( 5.0 );
The time is measured in seconds.
To change the volume, we can pass a
flash.media.SoundTransform object to the
player.soundTransform = new SoundTransform( 0.5 );
As mentioned above,
SoundPlayer is a subclass of
LayoutGroup. For more detailed information about the skinning options available to
SoundPlayer, see How to use the Feathers