<?xml version="1.0" encoding="utf-8"?> <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="de.dtele.ui.components.*" xmlns:osmf="org.osmf.media.*" implements="de.dtele.ui.components.viewer.IResourceViewer" width="450" skinClass="de.dtele.ui.components.skins.AudioResourceViewerSkin" remove="onRemove(event)"> <fx:Metadata> <![CDATA[ /** * Allows for viewing audio resources based on the OSMF from Adobe * * <p>By default audio playback is limited to the codecs supported * by the Adobe Flash Player. Extensions via OSMF plugins should be considered.</p> * * @see http://kb2.adobe.com/cps/402/kb402866.html List of codecs supported by Adobe Flash Player * @see http://www.opensourcemediaframework.com/ * * @author Mathias Brodala */ ]]> </fx:Metadata> <fx:Declarations> <osmf:MediaPlayer id="player" autoPlay="false" autoRewind="true" hasAudioChange="onHasAudioChange(event)" mediaPlayerStateChange="onPlayerStateChange(event)" currentTimeChange="onCurrentTimeChange(event)" durationChange="onDurationChange(event)"/> </fx:Declarations> <fx:Binding source="volumeBar.value" destination="player.volume"/> <fx:Binding source="volumeBar.muted" destination="player.muted"/> <fx:Script> <![CDATA[ import de.dtele.data.Assets; import de.dtele.data.Duration; import de.dtele.data.IResource; import de.dtele.messages.MessageManager; import mx.events.FlexEvent; import org.osmf.elements.AudioElement; import org.osmf.events.MediaPlayerCapabilityChangeEvent; import org.osmf.events.MediaPlayerStateChangeEvent; import org.osmf.events.TimeEvent; import org.osmf.media.MediaPlayerState; import org.osmf.media.URLResource; [Bindable]private var playQueued:Boolean = false; private var seeking:Boolean = false; public function view(resource:IResource):void { this.player.media = new AudioElement(new URLResource(resource.fullUrl)); this.dispatchEvent(new Event(Event.COMPLETE)); } /** * Formats the duration to seek to */ protected function progressSliderDataTipFormatFunction(value:Number):String { return new Duration(value).format(); } /** * Updates the volume bar value after audio has been received */ protected function onHasAudioChange(e:MediaPlayerCapabilityChangeEvent):void { if (e.enabled) { this.volumeBar.value = this.player.volume; } } protected function onPlayerStateChange(e:MediaPlayerStateChangeEvent):void { switch (e.state) { case MediaPlayerState.READY: if (this.playQueued) { this.playQueued = false; this.player.play(); } break; } if (this.playPauseButton) { this.playPauseButton.selected = (e.state == MediaPlayerState.PLAYING); } } protected function onCurrentTimeChange(e:TimeEvent):void { if (!seeking) { this.progressSlider.value = e.time; } this.durationLabel.text = new Duration(e.time).format() + " / " + new Duration(this.player.duration).format(); this.equalizer.invalidateDisplayList(); } protected function onDurationChange(e:TimeEvent):void { this.progressSlider.maximum = e.time; } protected function onPlayPauseButtonClick(e:MouseEvent):void { if (this.playPauseButton.selected) { if (this.player.state == MediaPlayerState.READY) { this.player.play(); } else { this.playQueued = true; } } else { this.player.pause(); } } protected function onProgressSliderChangeStart(event:FlexEvent):void { this.seeking = true; } protected function onProgressSliderChangeEnd(e:FlexEvent):void { this.player.seek(this.progressSlider.value); this.seeking = false; } protected function onRemove(event:FlexEvent):void { this.player.media = null; } ]]> </fx:Script> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace components "de.dtele.ui.components.*"; @namespace media "org.osmf.media.*"; @namespace elements "org.osmf.elements.*"; #durationLabel { color: #ffffff; } </fx:Style> <s:states> <s:State name="normal"/> <s:State name="selected"/> </s:states> <s:VGroup width="100%"> <components:Equalizer id="equalizer" width="100%" height="100"/> <s:HGroup verticalAlign="middle" width="100%" height="100%"> <s:ToggleButton id="playPauseButton" enabled="{!this.playQueued}" height="30" width="30" toolTip="{this.playPauseButton.selected ? 'Pause' : 'Wiedergabe'}" icon="{Assets.PlayImage}" icon.selected="{Assets.PauseImage}" skinClass="de.dtele.ui.components.skins.PlayPauseButtonSkin" click="onPlayPauseButtonClick(event)"/> <s:HSlider id="progressSlider" enabled="{!this.playQueued}" width="75%" maximum="100" stepSize="0.1" changeStart="onProgressSliderChangeStart(event)" changeEnd="onProgressSliderChangeEnd(event)" dataTipFormatFunction="progressSliderDataTipFormatFunction" skinClass="de.dtele.ui.components.skins.ProgressSliderSkin"/> <s:Label id="durationLabel" width="15%"/> <s:VolumeBar id="volumeBar" enabled="{!this.playQueued}" width="30" height="30" maximum="1" minimum="0" stepSize="0.05" skinClass="de.dtele.ui.components.skins.VolumeButtonSkin"/> </s:HGroup> </s:VGroup> </s:SkinnableContainer>