How to use the SoundPlayer component (Starling version)
The 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.
The Basics
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 soundSource
property:
player.soundSource = "http://example.com/sound.mp3";
Next, we'll add some components as children to control playback.
Controls
Let's give the SoundPlayer
a PlayPauseToggleButton
and a SeekSlider
. It's as simple as adding them as children of the SoundPlayer
:
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.
The complete list of media player controls includes several more pre-built components that you can add to a
SoundPlayer
.
In the next section, we'll position these two children using a layout.
Layout
Like a LayoutGroup
, a SoundPlayer
supports using layouts to automatically position and size its children. Let's pass a HorizontalLayout
to the layout
property of the SoundPlayer
:
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 HorizontalLayoutData
:
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;
If autoPlay
is set to false
, we can call play()
to begin playback manually:
player.play();
To pause, we can call pause()
to pause playback at the current position:
player.pause();
The togglePlayPause()
method may be called to toggle between the play and pause states:
player.togglePlayPause();
To stop playback and return the sound to the beginning, we may call stop()
:
player.stop();
The 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 soundTransform
property:
player.soundTransform = new SoundTransform( 0.5 );
Skinning a SoundPlayer
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 LayoutGroup
component.