I just completed creating a generic music player API and added it to eladlib. The music player handles common tasks such as:
1. Downloading music files and firing events when needed.
2. Keep track of the music progress as the track playing.
3. Provides access to ID3 information.
4. Methods that are often used in a music player such as: play, stop, pause.
You can see the class ASDOC under: com.elad.framework.musicplayer:
http://elromdesign.com/blog/Flex/API/asdoc/
Here’s an example of a class that implements the API. You can insert any URL in the input box and hit submit. To view the code, right click the application and select view source.
<FxApplication xmlns="http://ns.adobe.com/mxml/2009">
<Script>
<![CDATA[
import com.elad.framework.musicplayer.events.Id3Event;
import com.elad.framework.musicplayer.events.PlayerEvent;
import com.elad.framework.musicplayer.Player;
import mx.events.SliderEvent;
import com.elad.framework.musicplayer.events.DownloadEvent;
import com.elad.framework.musicplayer.events.PlayProgressEvent;
private var player:Player = new Player();
private var songUrl:String;
private function playSong():void
{
player.addEventListener(PlayProgressEvent.PLAYER_PROGRESS, onPlayerProgress);
player.addEventListener(DownloadEvent.DOWNLOAD_PROGRESS, onDownloadProgress);
player.addEventListener(PlayerEvent.PLAYER_ERROR, onPlayerError);
player.addEventListener(Id3Event.ID3, onTrackDataInformation);
player.playTrack(songUrl); // songLenght
}
private function onTrackDataInformation(event:Id3Event):void
{
songInfoText.text = event.id3.artist+" - "+event.id3.album;
}
private function onPlayerProgress(event:PlayProgressEvent):void
{
songSlider.value = event.playPosition;
currentTimeText.text = Player.formatTimeInSecondsToString(event.playPosition);
totalTimeText.text = Player.formatTimeInSecondsToString(event.total);
songSlider.maximum = event.total;
}
private function onPlayerError(event:PlayerEvent):void
{
throw new Error(event.message);
}
protected function dragStartHandler(event:SliderEvent):void
{
player.removeEventListener(PlayProgressEvent.PLAYER_PROGRESS, onPlayerProgress);
}
private function onDownloadProgress(event:DownloadEvent):void
{
progressBar.setProgress(event.bytesLoaded, event.bytesTotal);
}
protected function dragDropHandler(event:SliderEvent):void
{
player.setTrackPosition(songSlider.value);
player.addEventListener(PlayProgressEvent.PLAYER_PROGRESS, onPlayerProgress);
}
]]>
</Script>
<Text id="songInfoText" x="10" y="5" text="Artist - song name" />
<HSlider id="songSlider" y="25" x="10" width="400" minimum="0" showTrackHighlight="true" liveDragging="true"
thumbDrag="dragStartHandler(event)" thumbRelease="dragDropHandler(event)"/>
<ProgressBar id="progressBar" y="45" x="15" width="390" height="1" minimum="0" maximum="100" labelWidth="0"
direction="right" mode="manual" />
<Text y="45" x="420" text="Track Loader"/>
<HBox y="30" x="420" horizontalGap="0">
<Text id="currentTimeText" text="00:00"/>
<Text text="/"/>
<Text id="totalTimeText" text="00:00"/>
</HBox>
<HBox y="60" x="10" horizontalGap="12">
<Button id="playButton" label="play" click="playSong();" enabled="false" />
<Button label="pause" click="player.pauseTrack()" />
<Button label="stop" click="songSlider.value=0; currentTimeText.text = '00:00'; player.stopTrack()" />
<Button label="fastforward" click="player.fastforward();" />
<Button label="rewind" click="player.rewind();" />
</HBox>
<FormItem y="90">
<FormItem label="Music Url:" />
<HBox>
<TextInput id="textInput" width="200" height="20" text="http://www.themagicofdc.com/multimedia/mp3/WonderfulWorld.mp3"/>
<Button label="Submit" click="this.songUrl=textInput.text; playSong(); playButton.enabled=true" />
</HBox>
</FormItem>
I am seeing many people with id3 issues. I want to point out that there are issues with the ID3 event. It appears that the ID3 event sometimes get fire without information. I solved the issue by checking the sound API during download progress event.
sound.addEventListener(ProgressEvent.PROGRESS, downloadProgressHandler);
private function downloadProgressHandler(event:ProgressEvent):void
{
if (this.sound.id3.album != null || this.sound.id3.artist != null || this.sound.id3.songName != null || this.sound.id3.genere != null)
{
// ID3 information is avaliable
}
}
Another challange to point out. While loading a music track from the Web it takes the loader some time (depands on the size of the song and the speed of your internet) before it gets the total length of the track, so you can either use the playTrack method with only the URL:
player.playTrack(songUrl);
Or use the song URL and the lenght of the song, like the example below:
player.playTrack(songUrl, songLenght);
Which will allow you to have a better user experience.























I added a method to change the volume.
protected function dragVolumeHandler(event:SliderEvent):void
{
player.setVolume(volumeSlider.value);
}
minimum="0" maximum="1"
liveDragging="true"
thumbDrag="dragVolumeHandler(event)" />