Exemple

Voici un exemple de code HTML pour faire marcher le lecteur :

<object type="application/x-shockwave-flash" data="player_mp3.swf?mp3=test.mp3" width="200" height="20">
	<param name="movie" value="player_mp3.swf?mp3=test.mp3" />
	<param name="wmode" value="transparent" />
</object>

Propriétés

Source

Le SWF a été compilé avec http://mtasc.org/

/** 
 * Lecteur mp3 
 * @author		neolao <neo@neolao.com> 
 * @version 		0.5 (15/02/2006) 
 * @link		http://resources.neolao.com/flash/components/player_mp3 
 * @license		http://creativecommons.org/licenses/by-sa/2.5/ 
 */ 
class PlayerMP3 { 
 
	static var backgroundColor1:Number = (_root.bgcolor1 != undefined)?parseInt(_root.bgcolor1, 16):0x7c7c7c; 
	static var backgroundColor2:Number = (_root.bgcolor2 != undefined)?parseInt(_root.bgcolor2, 16):0x000000; 
	static var buttonColor:Number = (_root.buttoncolor != undefined)?parseInt(_root.buttoncolor, 16):0xffffff; 
	static var buttonOverColor:Number = (_root.buttonovercolor != undefined)?parseInt(_root.buttonovercolor, 16):0xffff00; 
	static var sliderColor1:Number = (_root.slidercolor1 != undefined)?parseInt(_root.slidercolor1, 16):0xcccccc; 
	static var sliderColor2:Number = (_root.slidercolor2 != undefined)?parseInt(_root.slidercolor2, 16):0x888888; 
	static var sliderOverColor:Number = (_root.sliderovercolor != undefined)?parseInt(_root.sliderovercolor, 16):0xeeee00; 
	static var textColor:Number = (_root.textcolor != undefined)?parseInt(_root.textcolor, 16):0xffffff; 
	static var loadingColor:Number = (_root.loadingcolor != undefined)?parseInt(_root.loadingcolor, 16):0xffff00; 
 
	static var showStop:Boolean = (_root.showstop != undefined)?true:false; 
	static var showInfo:Boolean = (_root.showinfo != undefined)?true:false; 
 
	static var playButton:MovieClip; 
	static var pauseButton:MovieClip; 
	static var stopButton:MovieClip; 
	static var infoButton:MovieClip; 
	static var infoPanel:MovieClip; 
	static var loading:MovieClip; 
	static var slider:MovieClip;
	static var buttonWith:Number = 26;
	static var sliderPosition:Number = 0;
	static var sliderWidth:Number = 20;
	static var width:Number = 200;
	static var height:Number = 20;
	static var sound:Sound = new Sound(); 
	static var position:Number = 0; 
	static var autoplay:Boolean = false; 
	static var loop:Boolean = false;	 
	static function main(){		 
		// background 
		var background:MovieClip = _root.createEmptyMovieClip("background_mc", _root.getNextHighestDepth()); 
		with(background){ 
			beginGradientFill("linear",  
							[backgroundColor1, backgroundColor2],  
							[100,100],  
							[0,255],  
							{matrixType:"box", x:0, y:0, w:200, h:20, r:Math.PI/2}); 
			moveTo(0, 5); 
			lineTo(0, 15); 
			curveTo(0, 20, 5, 20); 
			lineTo(195, 20); 
			curveTo(200, 20, 200, 15); 
			lineTo(200, 5); 
			curveTo(200, 0, 195, 0); 
			lineTo(5, 0); 
			curveTo(0, 0, 0, 5); 
			endFill(); 
		} 
 
		// play button 
		playButton = _root.createEmptyMovieClip("play_btn", _root.getNextHighestDepth()); 
		with(playButton){ 
			beginFill(0, 0); 
			moveTo(2, 2); 
			lineTo(2, 16); 
			lineTo(buttonWith-4, 16); 
			lineTo(buttonWith-4, 2); 
			endFill(); 
		} 
		playButton.onRelease = function(){ 
			if(!this.firstPlay){ 
				PlayerMP3.sound.loadSound(_root.mp3, true); 
				PlayerMP3.loading.onEnterFrame = PlayerMP3.loading.show; 
				PlayerMP3.loading._visible = true; 
				this.firstPlay = true; 
			} 
			PlayerMP3.enabledButton(this, false, true); 
			PlayerMP3.enabledButton(PlayerMP3.pauseButton, true); 
			PlayerMP3.enabledButton(PlayerMP3.stopButton, true); 
			PlayerMP3.sound.start(Math.round(PlayerMP3.position / 1000)); 
			_root.onEnterFrame = PlayerMP3.barEnterFrame; 
		}; 
		var playIcon:MovieClip = _root.createEmptyMovieClip("play_icon", _root.getNextHighestDepth()); 
		playButton.icon = playIcon; 
		initButton(playButton); 
		with(playIcon){ 
			beginFill(buttonColor); 
			lineTo(0, 8); 
			lineTo(5, 4); 
			endFill(); 
			_y = 6; 
			_x = 12; 
		} 
 
		// pause button 
		playButton.duplicateMovieClip("pause_btn", _root.getNextHighestDepth()); 
		pauseButton = _root.pause_btn; 
		pauseButton.onRelease = function(){ 
			PlayerMP3.enabledButton(this, false, true); 
			PlayerMP3.enabledButton(PlayerMP3.playButton, true); 
			PlayerMP3.position = PlayerMP3.sound.position; 
			PlayerMP3.sound.stop(); 
			delete _root.onEnterFrame; 
		}; 
		var pauseIcon:MovieClip = _root.createEmptyMovieClip("pause_icon", _root.getNextHighestDepth()); 
		pauseButton.icon = pauseIcon; 
		initButton(pauseButton); 
		with(pauseIcon){ 
			beginFill(buttonColor); 
			lineTo(0, 8); 
			lineTo(3, 8); 
			lineTo(3, 0); 
			endFill(); 
			beginFill(buttonColor); 
			moveTo(5, 0); 
			lineTo(5, 8); 
			lineTo(8, 8); 
			lineTo(8, 0); 
			endFill(); 
			_y = 6; 
			_x = 10; 
		} 
		enabledButton(pauseButton, false, true); 
 
		// separator 
		var separator:MovieClip = _root.createEmptyMovieClip("separator_mc", _root.getNextHighestDepth()); 
		with(separator){ 
			beginFill(0xcccccc, 50); 
			lineTo(0, 16); 
			lineTo(1, 16); 
			lineTo(1, 0); 
			endFill(); 
			beginFill(0x666666, 50); 
			lineTo(-1, 0); 
			lineTo(-1, 16); 
			lineTo(0, 16); 
			endFill(); 
			_y = 2; 
			_x = buttonWith; 
		} 
		sliderPosition = buttonWith + 5;
 
		if(showStop){
			// stop button
			var stopPosition:Number = sliderPosition - 5;
 
			playButton.duplicateMovieClip("stop_btn", _root.getNextHighestDepth(), {_x:stopPosition}); 
			stopButton = _root.stop_btn; 
			stopButton.onRelease = function(){ 
				PlayerMP3.enabledButton(this, false); 
				PlayerMP3.enabledButton(PlayerMP3.pauseButton, false, true); 
				PlayerMP3.enabledButton(PlayerMP3.playButton, true); 
				PlayerMP3.position = 0; 
				PlayerMP3.sound.stop(); 
				PlayerMP3.slider._x = PlayerMP3.sliderPosition;
				delete _root.onEnterFrame;
				/* 
				// Effacer la ligne du dessus
				// pour stopper le chargement du son quand on appuye sur STOP
				if(PlayerMP3.sound.duration)
				_root.loadMovie(_root._url);
				//*/
			}; 
			var stopIcon:MovieClip = _root.createEmptyMovieClip("stop_icon", _root.getNextHighestDepth()); 
			stopButton.icon = stopIcon; 
			initButton(stopButton); 
			with(stopIcon){ 
				beginFill(buttonColor); 
				lineTo(0, 8); 
				lineTo(8, 8); 
				lineTo(8, 0); 
				endFill(); 
				_y = 6; 
				_x = stopPosition + 9; 
			} 
			enabledButton(stopButton, false); 
 
			// separator 2 
			separator.duplicateMovieClip("separator2_mc", _root.getNextHighestDepth(), {_x:stopPosition+buttonWith}); 
 
			sliderPosition = stopPosition + buttonWith + 5;
		}
 
		if(showInfo){
			// info button 
			var infoPosition:Number = sliderPosition - 5;
 
			playButton.duplicateMovieClip("info_btn", _root.getNextHighestDepth(), {_x:infoPosition}); 
			infoButton = _root.info_btn; 
			infoButton.onRelease = function(){
				if(this.panel._visible = !this.panel._visible) this.panel.onEnterFrame = this.panel.update;
				else delete this.panel.onEnterFrame;
			}; 
			infoPanel = _root.createEmptyMovieClip("info_panel", _root.getNextHighestDepth()); 
			var infoIcon:MovieClip = _root.createEmptyMovieClip("info_icon", _root.getNextHighestDepth()); 
			infoButton.icon = infoIcon; 
			infoButton.panel = infoPanel; 
			initButton(infoButton); 
			with(infoIcon){ 
				lineStyle(2,buttonColor); 
				moveTo(0, 2); 
				curveTo(0, 0, 2, 0); 
				curveTo(4, 0, 4, 2); 
				curveTo(4, 3.5, 3, 4); 
				curveTo(2, 5, 2, 6); 
				moveTo(2, 8); 
				lineTo(2, 9); 
				_y = 6; 
				_x = infoPosition + 10; 
			} 
			with(infoPanel){ 
				beginGradientFill("linear",  
								[backgroundColor1, backgroundColor2],  
								[100,100],  
								[0,255],  
								{matrixType:"box", x:0, y:0, w:200, h:20, r:Math.PI/2}); 
				moveTo(0, 5); 
				lineTo(0, 15); 
				curveTo(0, 20, 5, 20); 
				lineTo(195, 20); 
				curveTo(200, 20, 200, 15); 
				lineTo(200, 5); 
				curveTo(200, 0, 195, 0); 
				lineTo(5, 0); 
				curveTo(0, 0, 0, 5); 
				endFill();
				createTextField("time_txt", 1, 2, 0, 70, 20); 
				createTextField("info_txt", 2, 72, 0, 126, 20); 
			} 
			var infoStyle:TextFormat = new TextFormat(); 
			infoStyle.color = textColor; 
			infoStyle.font = "_sans"; 
			infoStyle.align = "left"; 
			infoPanel.time_txt.selectable = false; 
			infoPanel.time_txt.setNewTextFormat(infoStyle); 
			infoPanel.info_txt.selectable = false; 
			infoPanel.info_txt.setNewTextFormat(infoStyle); 
			infoPanel._visible = false;
			infoPanel.onRelease = function(){
				delete this.onEnterFrame;
				this._visible = false;
			};
			infoPanel.waitScroll = infoPanel.scrollMemo = 0;
			infoPanel.update = function(){
				var sep:String = "";
				this.swapDepths(_root.getNextHighestDepth()); 
				this._visible = true;
				this.time_txt.text = ""; 
				this.info_txt.text = ""; 
 
				if(PlayerMP3.sound.duration != undefined){
					this.time_txt.text = PlayerMP3.milli2time(PlayerMP3.sound.position) + "/" + PlayerMP3.milli2time(PlayerMP3.sound.duration); 
				}else{
					this.time_txt.text = "Non chargé";
				}
 
				if(PlayerMP3.sound.id3.artist != undefined){ 
					this.info_txt.text += sep + PlayerMP3.sound.id3.artist; 
					sep = " - ";
				} 
 
				if(PlayerMP3.sound.id3.songname != undefined){ 
					this.info_txt.text += sep + PlayerMP3.sound.id3.songname; 
				} 
 
				if(this.info_txt.text == ""){ 
					this.info_txt.text += "Inconnu"; 
				} 
 
				// Défilement
				if(this.scrollMemo == this.info_txt.hscroll && ++this.waitScroll > 30){
					this.info_txt.hscroll = this.scrollMemo += 1;
				}
				if(this.scrollMemo != this.info_txt.hscroll && --this.waitScroll >= 0){
					if(this.waitScroll <= 0){
						this.info_txt.hscroll = this.scrollMemo = 0;
						this.waitScroll = 0;
					}
				}				
			};
 
			// separator 3 
			separator.duplicateMovieClip("separator3_mc", _root.getNextHighestDepth(), {_x:infoPosition+buttonWith});
 
			sliderPosition = infoPosition + buttonWith + 5;
		}
 
		// bar background 
		var barBg:MovieClip = _root.createEmptyMovieClip("barBg_mc", _root.getNextHighestDepth()); 
		with(barBg){ 
			beginFill(0xcccccc, 25); 
			lineTo(PlayerMP3.width - PlayerMP3.sliderPosition - 10, 0); 
			lineTo(PlayerMP3.width - PlayerMP3.sliderPosition - 10, 1); 
			lineTo(0, 1); 
			endFill(); 
			beginFill(0x666666, 25); 
			moveTo(0, 0) 
			lineTo(0, -1); 
			lineTo(PlayerMP3.width - PlayerMP3.sliderPosition - 10, -1); 
			lineTo(PlayerMP3.width - PlayerMP3.sliderPosition - 10, 0); 
			endFill(); 
			_y = 10; 
			_x = PlayerMP3.sliderPosition; 
		} 
 
		// bar loading 
		loading = _root.createEmptyMovieClip("loading_mc", _root.getNextHighestDepth());
		with(loading){ 
			beginFill(loadingColor, 75); 
			moveTo(0, -1) 
			lineTo(PlayerMP3.width - PlayerMP3.sliderPosition - 10, -1); 
			lineTo(PlayerMP3.width - PlayerMP3.sliderPosition - 10, 1); 
			lineTo(0, 1); 
			endFill();
			_y = 10; 
			_x = PlayerMP3.sliderPosition; 
		}
		loading.show = function(){ 
			var percent:Number = Math.round(PlayerMP3.sound.getBytesLoaded() / PlayerMP3.sound.getBytesTotal() * 100); 
			this._xscale = (percent >= 1)?percent:0; 
			if(percent == 100){ 
				this._visible = false; 
				delete this.onEnterFrame; 
			} 
		};
		loading._xscale = 0; 
		loading._visible = false; 
 
 
		// bar slider 
		slider = _root.createEmptyMovieClip("barSlider_mc", _root.getNextHighestDepth()); 
		slider.onRollOver = function(){ 
			var color:Color = new Color(this); 
			color.setRGB(PlayerMP3.sliderOverColor); 
		}; 
		slider.onRollOut = function(){ 
			var color:Color = new Color(this); 
			var transform:Object = {ra: 100, rb: 0, ga: 100, gb: 0, ba: 100, bb: 0, aa: 100, ab: 0}; 
			color.setTransform(transform); 
		}; 
		slider.onPress = function(){ 
			this.startDrag(false, PlayerMP3.sliderPosition, 6, PlayerMP3.width-30, 6); 
			PlayerMP3.sound.stop(); 
			delete _root.onEnterFrame; 
		}; 
		slider.onRelease = slider.onReleaseOutside = function(){ 
			this.stopDrag(); 
			var position:Number = (this._x - PlayerMP3.sliderPosition) / (PlayerMP3.width - PlayerMP3.sliderPosition - PlayerMP3.sliderWidth - 10) * PlayerMP3.sound.duration; 
			PlayerMP3.position = position; 
			if(!PlayerMP3.playButton.enabled){ 
				PlayerMP3.playButton.onRelease(); 
			} 
		}; 
		with(slider){ 
			beginGradientFill("linear",  
							[sliderColor1, sliderColor2],  
							[100,100],  
							[50,150],  
							{matrixType:"box", x:0, y:0, w:sliderWidth, h:10, r:Math.PI/2}); 
			moveTo(0, 4); 
			curveTo(0, 8, 4, 8); 
			lineTo(sliderWidth-4, 8); 
			curveTo(sliderWidth, 8, sliderWidth, 4); 
			curveTo(sliderWidth, 0, sliderWidth-4, 0); 
			lineTo(4, 0); 
			curveTo(0, 0, 0, 4); 
			endFill(); 
			_y = 6; 
			_x = sliderPosition; 
		} 
 
		// sound 
		sound.onSoundComplete = function(){ 
			if(PlayerMP3.loop) this.start(); 
			else PlayerMP3.stopButton.onRelease(); 
		}; 
		if(_root.autoplay) playButton.onRelease(); 
		else stopButton.onRelease(); 
		PlayerMP3.loop = _root.loop; 
		sound.setVolume((_root.volume != undefined)?_root.volume:100); 
		if(_root.bgcolor != undefined){ 
			with(_root){ 
				beginFill(parseInt(_root.bgcolor, 16)); 
				lineTo(0,20); 
				lineTo(200,20); 
				lineTo(200,0); 
				endFill(); 
			} 
		} 
	} 
	/** 
	 * Initialisation d'un bouton 
	 *  
	 * On ajoute les comportements communs à tous les boutons 
	 * @param MovieClip button L'instance du bouton
	 */ 
	static function initButton(button){ 
		button.color = new Color(button.icon) 
		button.onRollOver = function(){ 
			this.color.setRGB(PlayerMP3.buttonOverColor); 
		}; 
		button.onRollOut = button.onDragOut = button.onPress = function(){ 
			this.color.setRGB(PlayerMP3.buttonColor); 
		}; 
	} 
	/** 
	 * Change l'état d'un bouton 
	 * @param MovieClip button L'instance du bouton 
	 * @param Boolean status true pour activer le bouton, sinon false 
	 * @param Boolean true pour masquer complètement le bouton
	 */ 
	static function enabledButton(button, status, mask){ 
		button.enabled = status; 
		button._visible = button.icon._visible = !mask; 
		if(!status) button.icon._alpha = 30; 
		else button.icon._alpha = 100; 
	} 
	/** 
	 * Le enterFrame du slider 
	 */ 
	static function barEnterFrame(){
		var total:Number = (PlayerMP3.loading._visible)?PlayerMP3.loading._width:PlayerMP3.width - PlayerMP3.sliderPosition - PlayerMP3.sliderWidth - 10;
		var position:Number = Math.round(PlayerMP3.sound.position/PlayerMP3.sound.duration * total); 
		PlayerMP3.slider._x = PlayerMP3.sliderPosition + position; 
	}
	/**
	 * Converti les millisecondes en temps
	 * @param Number milli Les millisecondes à convertir
	 * @return String Une représentation du temps
	 */
	static function milli2time(milli):String{
		var min:Number = Math.floor(milli / (1000 * 60));
		var sec:Number = Math.floor(milli / 1000) % 60;
		return ((min < 10)?"0"+min:min) + ":" + ((sec < 10)?"0"+sec:sec);
	}
}