Merender Spektrum Audio MP3 di Flash dengan computeSpectrum()

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam tutorial ini, saya akan mengajarkan Anda cara membuat representasi visual dari spektrum audio file suara, menggunakan metode SoundMixer.computeSpectrum dari Flash. Kita akan menggunakan empat kelas untuk efek ini: Sound, SoundChannel, SoundMixer, dan ByteArray. Saya akan menjelaskan setiap kelas saat kita menggunakannya.

Pratinjau Hasil Akhir

Mari kita lihat hasil akhir yang akan kita jalani:

Klik untuk melihat demo

Langkah 1: Mengatur File Flash Anda

Luncurkan Flash Pro dan buat Dokumen Flash baru. Atur ukuran panggung menjadi 500x300px, warna latar belakang ke #000000, dan frame rate ke 24fps.

Penyiapan Panggung Di timeline Anda, pilih layer yang ada dan beri nama "Buttons". Kemudian klik Window > Common Libraries > Buttons.

Pilih set tombol favorit Anda, lalu tarik dan lepaskan tombol 'Play' dan 'Stop' ke sudut kanan bawah panggung.

Atur nama instance dari tombol ini ke play_btn dan stop_btn, masing-masing.

Langkah 2: Buat Kelas Dokumen

Buat file AS baru, dan simpan sebagai Main.as. Tambahkan kode ini (baca komentar untuk detail lebih lanjut):

Kode ini harus ditempatkan di Kelas baru kita:

package  {
  import flash.display.Sprite;
	import flash.media.Sound; //The Sound class is the first step in working with sound. It is used to load a sound, play a sound, and manage basic sound properties.
	import flash.net.URLRequest;
	
	public class Main extends Sprite {	
		private var sound:Sound; 
		public function Main() {
			sound = new Sound(new URLRequest("sound.mp3")); //assign music to the sound variable.
			sound.play(); //play assigned sound.
		}
	}
}

Anda harus meletakkan file MP3 yang disebut sound.mp3 di direktori yang sama dengan direktori output FLA Anda. Setiap MP3 akan dilakukan; yang termasuk dalam unduhan sumber tutorial.

Langkah 3: Kelas Dokumen

Tambahkan nama kelas ke field Kelas di bagian Publish dari panel Properties untuk mengaitkan FLA dengan kelas dokumen Main.

Jika Anda tidak akrab dengan konsep kelas dokumen, periksa Tip Cepat ini sebelum membaca lebih lanjut.

Bagian PublishLalu tekan Ctrl+Enter untuk menguji Aplikasi Anda.

Langkah 4: Menangani Suara Menggunakan Tombol

Mari tambahkan instance dari kelas baru: SoundChannel. Kelas ini digunakan untuk menyimpan berbagai suara di saluran audio terpisah; setiap saluran dibuat oleh instance SoundChannel, dan kita menggunakan instance ini untuk mengontrol suara.

package  {
	import flash.display.Sprite;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	public class Main extends Sprite {
		private var sound:Sound;
		private var channel:SoundChannel;
		
		public function Main() {
			sound = new Sound(new URLRequest("sound.mp3"));
			play_btn.addEventListener(MouseEvent.CLICK,onPlayHandler);
			stop_btn.addEventListener(MouseEvent.CLICK,onStopHandler);
		}
		
		private function onPlayHandler(event:MouseEvent):void{
			channel = sound.play();
		}
		
		private function onStopHandler(event:MouseEvent):void{
			channel.stop();
		}
	}
}

Seperti yang Anda lihat, ketika Play diklik, kita tidak hanya memainkan MP3, kita juga menetapkannya ke SoundChannel. Kita kemudian dapat mengontrol pemutaran melalui instance SoundChannel nanti - dalam hal ini, dengan membuatnya berhenti.

Langkah 5: Membuat Animasi Sederhana

Sekarang mari kita buat beberapa animasi sederhana untuk suara ini, lagi-lagi menggunakan kelas SoundChannel.

package  {
	import flash.display.Sprite;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.events.Event;
	
	public class Main extends Sprite {
		
		private var sound:Sound;
		private var channel:SoundChannel;
		
		public function Main() {
			sound = new Sound(new URLRequest("sound.mp3"));
			play_btn.addEventListener(MouseEvent.CLICK,onPlayHandler);
			stop_btn.addEventListener(MouseEvent.CLICK,onStopHandler);
		}
		
		private function onPlayHandler(event:MouseEvent):void{
			channel = sound.play();//assign sound to channel class 
			addEventListener(Event.ENTER_FRAME,animateBars); //render the animation every frame
		}
		
		private function onStopHandler(event:MouseEvent):void{
			channel.stop();
			graphics.clear();
			removeEventListener(Event.ENTER_FRAME,animateBars);//stop rendering the animation
		}
		
		private function animateBars(event:Event):void{
			
			graphics.clear();
			
			graphics.beginFill(0xAB300C,1);
			//Draw a rectangle whose height corresponds to channel.leftPeak
			graphics.drawRect(190,300,50,-channel.leftPeak * 160 );
			graphics.endFill();
			
			graphics.beginFill(0xAB300C,1);
			//Draw a rectangle whose height corresponds to channel.rightPeak
			graphics.drawRect(250,300,50,-channel.rightPeak  * 160 );
			graphics.endFill(); 
		}
	}
}

Properti leftPeak dan rightPeak dari instance SoundChannel sesuai dengan amplitudo suara saat ini, melalui saluran kiri dan kanan. Anggap saja seperti ini: jika Anda memiliki speaker stereo, maka leftPeak adalah volume suara yang keluar dari speaker kiri, dan rightPeak adalah volume suara yang keluar dari speaker kanan.

Anda dapat menekan Ctrl+Enter untuk menguji aplikasi Anda:

Langkah 6: Apa itu SoundMixer?

Kelas SoundMixer mengontrol semua suara yang tertanam dan streaming dalam aplikasi, untuk semua SoundChannels sekaligus.

Ini memiliki tiga metode: isSoundsInaccessible(), yang menentukan apakah suara apa pun tidak dapat diakses karena alasan keamanan; stopAll(), yang menghentikan pemutaran semua suara; dan computeSpectrum(), yang kita minati untuk tutorial ini. Metode terakhir mengambil "snapshot" dari suara saat ini, dan mendorongnya ke objek ByteArray.

Langkah 7: Apa itu ByteArray?

Kelas ByteArray menyediakan metode dan properti untuk mengoptimalkan membaca, menulis, dan bekerja dengan data biner. Ini menyimpan data sebagai array byte, sesuai namanya. Cari tahu lebih lanjut dengan Pengenalan untuk ByteArray ini.

Langkah 8: Animasi yang Lebih Kompleks

Jadi sekarang mari kita buat animasi yang lebih kompleks menggunakan metode SoundMixer.computeSpectrum(). Sekali lagi, baca komentar di kode untuk sepenuhnya memahami perilakunya:

package {
	import flash.display.Sprite;
	import flash.media.Sound;
	import flash.utils.ByteArray;
	import flash.events.Event;
	import flash.media.SoundMixer;
	import flash.filters.GlowFilter;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.media.SoundChannel;

	public class Main extends Sprite{
		private var sound:Sound;
		private var channel:SoundChannel;
		private var byteArr:ByteArray = new ByteArray();
		private var glow:GlowFilter = new GlowFilter();
		private var filterArr:Array;
		private var line:Sprite = new Sprite();

		public function Main(){
			// create a "glow" effect for the animation we will render
			glow.color = 0x009900;
			glow.alpha = 1;
			glow.blurX = 10;
			glow.blurY = 10;
			
			// load your MP3 in to the Sound object
			sound = new Sound(new URLRequest("sound.mp3"));			
			// apply the glow effect
			filterArr = new Array(glow);
			line.filters = filterArr;
			addChild(line);
			
			play_btn.addEventListener(MouseEvent.CLICK,onPlayHandler);
			stop_btn.addEventListener(MouseEvent.CLICK,onStopHandler);
		}
		
		private function onPlayHandler(event:MouseEvent):void{
			channel = sound.play(0,1000);
			addEventListener(Event.ENTER_FRAME,spectrumHandler);
		}
		
		private function onStopHandler(event:MouseEvent):void{
			channel.stop();
			line.graphics.clear();
			removeEventListener(Event.ENTER_FRAME,spectrumHandler);
		}

		private function spectrumHandler(event:Event):void{
			line.graphics.clear();
			line.graphics.lineStyle(1,Math.random() * 0xFFFFFF);
			line.graphics.moveTo(-1,150);
			// push the spectrum's bytes into the ByteArray
			SoundMixer.computeSpectrum(byteArr);

			for (var i:uint=0; i<256; i++){
				// read bytes and translate to a number between 0 and +300
				var num:Number = byteArr.readFloat() * 150 + 150;
				//use this number to draw a line
				line.graphics.lineTo(i*2,num);
			}
		}
	}
}

Bagian terpenting dari kode ini adalah baris 53 dan 57. Di sini, seluruh gelombang suara diterjemahkan ke ByteArray, yang kemudian dibaca, byte demi byte, dan diterjemahkan ke dalam serangkaian angka.

ByteArray akan menjadi float sepanjang 512; di perulangan for, kita hanya membaca 256 float pertama, yang sesuai dengan seluruh gelombang suara dari saluran kiri (suara yang masuk melalui speaker kiri).

Tekan Ctrl+Enter untuk menguji Aplikasi Anda.

Langkah 9: Mengisi Kesenjangan

Kita dapat mengisi area di bawah garis untuk memberi kita efek yang berbeda:

Yang perlu kita lakukan adalah menggambar kotak dan mengisinya, menggunakan metode graphics. Kode untuk ini adalah sebagai berikut:

package {
	import flash.display.Sprite;
	import flash.media.Sound;
	import flash.utils.ByteArray;
	import flash.events.Event;
	import flash.media.SoundMixer;
	import flash.filters.GlowFilter;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.media.SoundChannel;

	public class Main extends Sprite{
		private var sound:Sound;
		private var channel:SoundChannel;
		private var byteArr:ByteArray = new ByteArray();
		private var glow:GlowFilter = new GlowFilter();
		private var filterArr:Array;
		private var line:Sprite = new Sprite();

		public function Main(){
			glow.color = 0xFF0000;
			glow.alpha = 1;
			glow.blurX = 10;
			glow.blurY = 10;
			
			sound = new Sound(new URLRequest("sound.mp3"));
			
			filterArr = new Array(glow);
			line.filters = filterArr;
			addChild(line);
			addChild(play_btn);
			addChild(stop_btn);
			
			play_btn.addEventListener(MouseEvent.CLICK,onPlayHandler);
			stop_btn.addEventListener(MouseEvent.CLICK,onStopHandler);
		}
		
		private function onPlayHandler(event:MouseEvent):void{
			channel = sound.play(0,1000);
			addEventListener(Event.ENTER_FRAME,spectrumHandler);
		}
		
		private function onStopHandler(event:MouseEvent):void{
			channel.stop();
			line.graphics.clear();
			removeEventListener(Event.ENTER_FRAME,spectrumHandler);
		}

		private function spectrumHandler(event:Event):void{
			// draw one edge of the box, and specify a fill
			line.graphics.clear();
			line.graphics.beginFill(0xFF0000,1);
			line.graphics.lineStyle(1,0xFF0000);
			line.graphics.moveTo(-1,150);
			SoundMixer.computeSpectrum(byteArr);

			for (var i:uint=0; i<256; i++){
				var num:Number = byteArr.readFloat() * 200 + 150;
				line.graphics.lineTo(i*2,num);
			}

			//draw the rest of the box
			line.graphics.lineTo(512,300);
			line.graphics.lineTo(0,300);
			line.graphics.lineTo(-1,150);
		}
	}
}

Langkah 10: Cobalah Sesuatu yang Berbeda

Kita dapat mengambil gagasan ini lebih jauh, untuk menambahkan efek yang lebih menarik dan kompleks:

Dalam hal ini, kita akan menggambar dua spektrum di atas satu sama lain, satu untuk saluran kiri dan satu untuk kanan. Untuk mencapai ini, kita akan menggunakan dua perulangan for yang masing-masing membaca 256 float, satu demi satu.

package {
	import flash.display.Sprite;
	import flash.media.Sound;
	import flash.utils.ByteArray;
	import flash.events.Event;
	import flash.media.SoundMixer;
	import flash.filters.GlowFilter;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.media.SoundChannel;

	public class Main extends Sprite{
		private var sound:Sound;
		private var channel:SoundChannel;
		private var byteArr:ByteArray = new ByteArray();
		private var glow:GlowFilter = new GlowFilter();
		private var filterArr:Array;
		private var line:Sprite = new Sprite();
		private var num:Number;
		public const GRAFT_HEIGHT:int = 150; //set animation height
		public const CHANNEL_SIZE:int = 256; //set left/right channel size

		public function Main(){
			glow.color = 0x009900;
			glow.alpha = 1;
			glow.blurX = 10;
			glow.blurY = 10;
			
			sound = new Sound(new URLRequest("sound.mp3"));
			
			filterArr = new Array(glow); //add glow to the animation
			line.filters = filterArr;
			addChild(line);
			
			play_btn.addEventListener(MouseEvent.CLICK,onPlayHandler);
			stop_btn.addEventListener(MouseEvent.CLICK,onStopHandler);
		}
		
		private function onPlayHandler(event:MouseEvent):void{
			channel = sound.play(0,1000); // play sound 1000 times
			addEventListener(Event.ENTER_FRAME,spectrumHandler);
		}
		
		private function onStopHandler(event:MouseEvent):void{
			channel.stop();
			line.graphics.clear();
			removeEventListener(Event.ENTER_FRAME,spectrumHandler);
		}

		private function spectrumHandler(event:Event):void{
			num = 0;
			
			line.graphics.clear(); // create current graphics
			line.graphics.lineStyle(0, 0x00FF00);
			line.graphics.beginFill(0x00FF00,0.5);
			line.graphics.moveTo(0,GRAFT_HEIGHT);
			
			SoundMixer.computeSpectrum(byteArr);// add bytes to Sound mixer
			
			for (var i:int = 0; i < CHANNEL_SIZE; i++) {
                		num = (byteArr.readFloat() * GRAFT_HEIGHT);
                		line.graphics.lineTo(i * 2, GRAFT_HEIGHT - num);
            		}
			
			line.graphics.lineTo(CHANNEL_SIZE * 2, GRAFT_HEIGHT);
			line.graphics.endFill();
			 
			line.graphics.lineStyle(0, 0xFF0000);
			line.graphics.beginFill(0xFF0000, 0.5);
			line.graphics.moveTo(CHANNEL_SIZE * 2,GRAFT_HEIGHT);
			 
			for (i = CHANNEL_SIZE; i > 0; i--) {
				num = (byteArr.readFloat() * GRAFT_HEIGHT);
				line.graphics.lineTo(i * 2, GRAFT_HEIGHT - num);
			}
			
			line.graphics.lineTo(0, GRAFT_HEIGHT);
			line.graphics.endFill();
		}
	}
}

Kesimpulan

Jadi kita telah belajar cara menggunakan berbagai kelas Sound, dan cara membuat animasi gambar suara yang indah menggunakan SoundMixer.

Terima kasih telah meluangkan waktu untuk membaca artikel ini, karena ini adalah tutorial pertama saya. Jika Anda memiliki pertanyaan, silakan tinggalkan komentar.