אודיו עם ActionScript 3

במאמר הקודם למדנו על שמירת מידע במחשב המקומי באמצעות ActionScript 3. במאמר הזה נלמד על פלאש ואודיו. אודיו הוא אחד הדברים ש-ActionScript מנהל בצורה טובה הרבה יותר מכל שפת Client Side אחרת.

ב-ActionScript 3 יש 5 קלאסים שמטפלים באודיו:

Sound – שמטפל בהעלאה של הקובץ ובמידע עליו, יחד עם SoundLoaderContext.

SoundMixer – מנהל את כל האודיו ושולט עליהם (כמו למשל על רמת הקול).

SoundChannel – כאשר אנו מנגנים קובץ, הוא מתנגן בערוץ משלו. בפלאש יש לנו מקום של עד 32 ערוצים שונים לניגון אודיו. אנו יכולים לשלוט על ערוץ ספציפי עם SoundTransform.

הדיאגרמה הבאה מראה איך הכל עובד:

קובץ ה-MP3 יכול להגיע משני מקורות. הראשון הוא לייבא באמצעות ה-GUI של פלאש את הקובץ לספריה, בדיוק כפי שעשינו את זה במאמר שהסביר איך לעבוד עם bitmap:
פותחים את ה-fla שבו אנו ניצור את האובייקטים שלנו, לוחצים על file ואז על import ואחרי כן לבחור ב-import to library. בוחרים את קובץ ה-MP3 שרוצים להעלות. לוחצים Ctrl+L על מנת לראות את כל הקבצים שיש 'בספריה', לוחצים על הקובץ שלנו עם הכפתור הימני ואז לוחצים על Linkage. מסמנים את Export for ActionScript ואז בוחרים את שם ה-class שישמש אותנו.

אנחנו יכולים גם לייבא את הקובץ מבחוץ באמצעות URLLoader וזה בדיוק מה שנעשה בדוגמא.

ועכשיו לדוגמא, אני אצור קובץ mySoundPlayer.as שדומה לזה שהשתמשנו בו במאמר הקודם – יש בו שלושה כפתורים – 'play' שמתחיל לנגן קובץ MP3 שאותו אני מייבא מבחוץ, stop שמפסיק את ניגון הקובץ וכפתור mute/unmute.

בסך הכל המבנה של הנגן שלי מאד דומה למבנה שבו השתמשתי במאמר על ShareObjects ואני לא צריך לפרט עליו מדי. הנה השלד שלו, ללא כל אובייקט Sound. שימו לב להערות בקוד:

package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;
	import flash.text.*;
	import flash.net.*;

	public class mySoundPlayer 
	{
		private var myStage;
		
		private var mute:Boolean = false;
		private var startingX:Number = 10;

		public function mySoundPlayer(myStage) 
		{
			this.myStage = myStage;
			createButton('play');
			createButton('stop');
			createButton('mute/unmute');
		}
		private function createButton(buttonText:String) {
			/* Creating Sprite */
			this.startingX+=20;
			var m_animSprite:Sprite = new Sprite();
			m_animSprite.graphics.beginFill(0x000000);
			m_animSprite.graphics.drawRect(startingX, 100, 50, 50);
			m_animSprite.graphics.endFill();
			this.myStage.addChild(m_animSprite);

			/* Creating text Field */
			var myTextField:TextField = new TextField();
			myTextField.text = buttonText;
			myTextField.textColor = 0xFF0000;
			myTextField.x = startingX+5;
			myTextField.y = 100;
			this.myStage.addChild(myTextField);
			this.startingX+=100;
			
			/* Adding event handlers */
			switch (buttonText) {
				case "play" :
					myTextField.addEventListener(MouseEvent.CLICK, playMySound);
					break;
				case "stop" :
					myTextField.addEventListener(MouseEvent.CLICK, stopMySound);
					break;
				case "mute/unmute" :
					myTextField.addEventListener(MouseEvent.CLICK, muteUnmuteMySound);
					break;
				default :
					trace("Error");
			}
		}
		private function playMySound(ev:Event) {
			//Play The sound
		}
		private function stopMySound(ev:Event) {
			//Stop the sound
		}
		private function muteUnmuteMySound(ev:Event) {

			if (this.mute == false) 
			{
				//Mute
			} 
			else 
			{
				//Unmute
			}
		}
	}
}

וכך נראה ה-fla שיוצר את האובייקט שלנו. לא לשכוח לשמור את שני הקבצים – ה-as וה-fla באותה תיקיה!

var m_mySound:mySoundPlayer  = new mySoundPlayer(stage);

טעינת הקובץ

קובץ האודיו שלנו הוא שיר מתקופת מלחמת העולם הראשונה (שניתן להשמיעו ולהורידו לפי חוק זכויות היוצרים בישראל) שנמצא בכתובת הבאה:

https://internet-israel.com/internet_files/flash/sample_song.mp3
אנו נטען אותו באמצעות urlRequest פשוט כפי שעשינו בעבר. ןאז ניצור אובייקט sound. אנו עושים זאת כך:

יוצרים אובייקט sound:

private var sound:Sound = new Sound();

את ה-urlRequest וטעינתו לתוך אובייקט ה-sound שלנו אנו עושים כך:

			var url:String = "https://internet-israel.com/internet_files/flash/sample_song.mp3";
			var urlRequest:URLRequest = new URLRequest(url);
			this.sound.load(urlRequest);

עכשיו יש צורך ליצור SoundChannel כדי לנגן את קובץ האודיו שטענו. עושים זאת כך, ראשית אנו ניצור private var soundChannel:SoundChannel ואחרי כן, בפונקצית ה-play:

this.soundChannel = this.sound.play();

זה הכל! על מנת לעשות פעולת stop, אנו משתמשים בשורה הבאה:

this.soundChannel.stop();

soundTransform גם הוא פשוט יחסית, כל מה שעושים זה להכניס את הקוד הבא.

				transform = soundChannel.soundTransform;
            	transform.volume = כל מספר בין 0 ל-1;
            	soundChannel.soundTransform = transform;

הקוד המלא של הנגן הוא:

package {
	import flash.display.Sprite;
	import flash.events.*;
	import flash.geom.*;
	import flash.text.*;
	import flash.net.*;
	import flash.media.*

	public class mySoundPlayer 
	{
		private var myStage;
		
		private var mute:Boolean = false;
		private var startingX:Number = 10;
		private var sound:Sound = new Sound();
		private var soundChannel:SoundChannel;
		private var transform;
		
		public function mySoundPlayer(myStage) 
		{
			this.myStage = myStage;
			createButton('play');
			createButton('stop');
			createButton('mute/unmute');
			
			
			var url:String = "https://internet-israel.com/internet_files/flash/sample_song.mp3";
			var urlRequest:URLRequest = new URLRequest(url);
			this.sound.load(urlRequest);
			
		}
		private function createButton(buttonText:String) {
			/* Creating Sprite */
			this.startingX+=20;
			var m_animSprite:Sprite = new Sprite();
			m_animSprite.graphics.beginFill(0x000000);
			m_animSprite.graphics.drawRect(startingX, 100, 50, 50);
			m_animSprite.graphics.endFill();
			this.myStage.addChild(m_animSprite);

			/* Creating text Field */
			var myTextField:TextField = new TextField();
			myTextField.text = buttonText;
			myTextField.textColor = 0xFF0000;
			myTextField.x = startingX+5;
			myTextField.y = 100;
			this.myStage.addChild(myTextField);
			this.startingX+=100;
			
			/* Adding event handlers */
			switch (buttonText) {
				case "play" :
					myTextField.addEventListener(MouseEvent.CLICK, playMySound);
					break;
				case "stop" :
					myTextField.addEventListener(MouseEvent.CLICK, stopMySound);
					break;
				case "mute/unmute" :
					myTextField.addEventListener(MouseEvent.CLICK, muteUnmuteMySound);
					break;
				default :
					trace("Error");
			}
		}
		private function playMySound(ev:Event) 
		{
			this.soundChannel = this.sound.play();
		}
		private function stopMySound(ev:Event) 
		{
			this.soundChannel.stop();
		}
		private function muteUnmuteMySound(ev:Event) {
			
			if (this.mute == false) 
			{
				//Mute
				transform = soundChannel.soundTransform;
            	transform.volume = 0;
            	soundChannel.soundTransform = transform;
				
				this.mute = true;
			} 
			else 
			{
				//Unmute
				transform = soundChannel.soundTransform;
            	transform.volume = 1;
            	soundChannel.soundTransform = transform;
				
				this.mute = false;
			}
		}
	}
}

ככה זה נראה במציאות – נגן חביב שמסוגל לנגן, לעצור ולעשות mute או unmute.

יש כמובן עוד שפע של תכונות שמאפשרות לנו לעשות עוד לא מעט דברים, כל הדברים זמינים תחת כל האובייקטים שלמדנו בדוקומנטציה של פלאש.

במאמר הבא אנו נלמד על וידאו בפלאש דרך ActionScript 3.