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.

Screenshot of a Feathers SoundPlayer component
A SoundPlayer component with controls skinned with MetalWorksMobileTheme

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.