Bir mp3 player veya video player hazırlamada dikkat edilmesi gerekenler genellikle; ihtiyacı karşılaması, kullanışlı olması ve kullanıcıda kafa karışıklığı oluşturmamasıdır. Konumuz olan mini mp3 playerı da en sade bir halle ve ihtiyaca karşılık verebilecek şekilde hazırlamaya çalıştım. Çalışmayı tek mp3 için hazırladım ve elzem olmayan bir kaç özelliği katmadım (konum rakamları, stop tuşu, ses düzeyi vs.). İlerde, inşallah daha gelişmiş halini yayınlamaya çalışırım. Öncelikle çalışmanın son haline bakalım;
Bu player’ın özellikleri; verileri, yani şarkı bilgisi ve şarkı yolunu harici bir XML üzerinden alması, yüklemeye tıklama ile başlaması, şarkı konumunun kontrol edilebilmesi, sağ ve sol ses düzeyinin bir ses spektrumu ile gösterilmesi, yükleme düzeyinin gösterilmesi, sarkı bitince başa sarması ve gövdedeki bazı hareket animasyonlarıdır. Şimdi bu müzik çaların yapısını oluşturan ve sahnemizde bulunan nesnelerden bahsedelim;
Aşağıdaki şekilde de görüldüğü gibi, ilk olarak gri-dörtgen bir çereçeve, bir köşeli parantez(‘pz_i’) ve spektrum için iki çubuğun(‘sol’, ‘sag’) içinde bulunduğu bir ana klip(‘pz’) var. Sonrasında tabanı oluşturacak bir tabaka, bilgilerin yazılacağı bir text(‘hakkinda_txt’) ve text’in silim işlemi için yine aynı tabaka(‘silgi’) var.
[şekil-1]
Daha sonra; durdur(‘dur_btn’) ve başlat(‘bsl_btn’) tuşlarının içinde bulunduğu bir ana klip(‘cal_mc’), tüm konum uzunluğunu gösteren ve alpha’sını sıfır yapacağım bir çubuk(‘tbn_mc’), mevcut yüklenmeyi gösteren bir çubuk(‘ykl_mc’) ve konumu gösteren mavi bir çubuk(‘knm_mc’) bulunuyor (Çubuklar, instance name’i ‘cubuklar’ olan bir klibin içinde).
Şarkı bilgilerini, yani şarkının adres ve ismini, harici bir XML dosyasından alıyoruz. Adres ismini verdiğimiz bu dosyanın içeriği aşağıdaki gibi olacak;
<?xml version="1.0" encoding="utf-8"?> <MP3> <bilgi>http://www.flashdersleri.net/wp-content/uploads/2010/05/muzik.mp3</bilgi> <bilgi>Ekmek Teknesi</bilgi> </MP3>
Burada mp3′e ait ilk bilgi, şarkının yolunu, ikinci bilgi ise ekranda gösterilecek yazıyı içeriyor. Şimdi kodları yazmaya başlayalım. Kodlar bir kaç bölümden oluşuyor;
-XML’i yükleme ve bazı değişkenlerin atanması;
var XML_mp3:XML;//Yeni bi XML tanımlıyoruz, buna daha sonra veri atayacağız var ses:Sound;//Ses için bir Sound nesnesi tanımlıyoruz var kanal:SoundChannel;//Sesi kontrol etmek içinde bir ses kanalı atıyoruz. var xml_yuklendi:Boolean=false//XML'in yüklendiğini; var ykl_tik:Boolean=false//ykl_mc'ye tıklama olup olmadığını ve var calmaVarmi:Boolean=false//Şu anda çalma olup olmadığını kontrol etmek için üç boolean oluşturuyoruz. var durmaPozisyonu:Number=0//Şarkını durma anındaki konumu. Şimdi sıfır. cal_mc.bsl_btn.visible=cal_mc.dur_btn.visible=false;//başlama ve durma butonu başta görünmesin. var yukleyici:URLLoader = new URLLoader();//XML'i yüklemek için yukleyici isminde bir URLLoader tanımlıyoruz. yukleyici.load(new URLRequest("http://www.flashdersleri.net/wp-content/uploads/2010/05/adres.xml"));//Yüklenecek XML yolunu belirtiyoruz. yukleyici.addEventListener(Event.COMPLETE, XML_calis);//XML yüklemesi bitince çalışacak olan 'XML_calis' fonksiyonu için bir dinleyici atıyoruz function XML_calis(e:Event){//XML yüklenince çalışacak fonksiyon XML_mp3 = new XML(e.target.data);//Daha önceden tanımladığımız XML_mp3'e yüklenen XML'in içeriği ekleniyor. hakkinda_txt.text=XML_mp3.bilgi[1];//hakkinda_txt'e XML'deki ikinci bilgi ekleniyor. xml_yuklendi=cal_mc.bsl_btn.visible=true}//XML yüklendi ve artık başlama butonu görünsün.
-Kontrol tuşları ayarları;
cal_mc.bsl_btn.addEventListener(MouseEvent.CLICK,basla) //Başlama butonuna basınca 'basla' fonksiyonunu çağır. cal_mc.dur_btn.addEventListener(MouseEvent.CLICK,durdur) //Durdurma butonuna basınca 'durdur' fonksiyonunu çağır. var ses_yuzde:Number; var ilk_play:Boolean=true; //Aşağıda kullanacağımız ses yüzde değeri için bir Number ve ilk defa play'e basıldığında yüklemeyi başlatmak için bir Boolean tanımlanıyor. function basla(e:MouseEvent){ //Başlat tuşuna(cal_mc.bsl_btn) basınca yapılacaklar cal_mc.bsl_btn.visible=0; cal_mc.dur_btn.visible=1//Başla tuşu görünmesin, durdur tuşu görünsün if(ilk_play){ //Eğer bu tuşa ilk defa basılıyorsa ses= new Sound(new URLRequest(XML_mp3.bilgi[0])); //ses'e XML'in ilk bilgisi yolundaki şarkı atansın ses.addEventListener(ProgressEvent.PROGRESS, ses_yukle); //Yükleme esnasında 'ses_yukle' fonksiyonunu çağır function ses_yukle(e:ProgressEvent){ ses_yuzde = e.bytesLoaded / e.bytesTotal //Ses için tanımladığımız yüzde yüklenen/tüm boyut olarak belirlendi cubuklar.ykl_mc.width=ses_yuzde*cubuklar.tbn_mc.width} //ykl_mc genişliği, tbn_mc'nin yukarıda belirlenen yüzdesi kadar olsun ses.addEventListener(IOErrorEvent.IO_ERROR, hata) //Eğer yüklemede bir hata olursa function hata(e:IOErrorEvent){calmaVarmi=false //Çalma yok cal_mc.bsl_btn.visible=cal_mc.dur_btn.visible=0 //Tuşlar görünmesin hakkinda_txt.text="Hata! Ses dosyası bulunamadı"; //Yazı alanı uyarı mesajı versin pz.pz_i.alpha=0};ilk_play=false} //köşeli parantez silinsin, play tuşuna ilk basış fonksiyonu bir kere çalışsın diye 'ilk_play' false yapıldı. kanal = ses.play(durmaPozisyonu);calmaVarmi=true; //Sesi durma pozisyonunda oynatıyoruz, çalma var pz.pz_i.alpha=1} //Köşeli parentez çalmada görünsün function durdur(e:MouseEvent){ //Pause tuşuna(cal_mc.bsl_btn) basınca yapılacaklar cal_mc.bsl_btn.visible=1;calmaVarmi=false; //Play tuşu görünsün pause tuşu görünmesin ve çalma yok. cal_mc.dur_btn.visible=0;durmaPozisyonu = kanal.position; //Durdur tuşu görünmesin ve durma konumu şimdiki konuma eşitlensin kanal.stop();} //Ve durma gerçekleşsin
-Sürekli çalışacak olan enterFrame fonksiyonu;
pz.sag.width=pz.sol.width=0; //Sol ve sağ spektrumların ilk genişliği sıfır var yuzde:Number //Daha sonra kullanılacak yüzde değeri cubuklar.alpha=silgi.alpha=pz.pz_i.alpha=0; //çubuklar,silgi ve köşeli parantez başta görünmesin stage.addEventListener(Event.ENTER_FRAME,calis) //Sürekli çalışacak fonksiyon function calis(e:Event){ if(calmaVarmi && xml_yuklendi){ //Konum çubuğu ayarları - çalma varsa ve XML yüklenmişse yapılacaklar yuzde=kanal.position/ses.length //'yuzde' değeri şimdiki konum/tüm uzunluk olarak atanıyor if(!ykl_tik){ //ykl_mc'ye tıklama yoksa yapılacaklar cubuklar.knm_mc.width=cubuklar.ykl_mc.width*yuzde}else{ //knm_mc genişliği ykl_mc'nin yüzdesi kadar olsun, yoksa; if(mouseX-cubuklar.x>=cubuklar.ykl_mc.width){cubuklar.knm_mc.width=cubuklar.ykl_mc.width} //Eğer knm_mc genişliği sınırı aşarsa ykl_mc genişliğine eşit olsun if(mouseX-cubuklar.x0 &&mouseX-cubuklar.x0){pz.pz_i.alpha-=.1}} //Spekturm çubukları kaybolunca köşeli parantez de kaybolsun if(Math.round(cubuklar.knm_mc.width)==Math.round(cubuklar.width) && !ykl_tik){ //Çalma bitince durma formatına geçip başa sarmak için calmaVarmi=false; kanal.stop() //Çalma yok, sesi durdur. cubuklar.knm_mc.width=durmaPozisyonu=0; //knm_mc ve durma konumu başa gelsin. cal_mc.bsl_btn.visible=1; cal_mc.dur_btn.visible=0}} //Play tuşu görünsün, pause tuşu görünmesin
-Konum çubuğu kontrolü;
cubuklar.knm_mc.width=0 //İlk durumda knm_mc genişliği sıfır cubuklar.knm_mc.addEventListener(MouseEvent.MOUSE_DOWN,bas_ykl) //knm_mc'ye ve ykl_mc'ye tıklamada da aydı fonksiyon çağırılıyor cubuklar.ykl_mc.addEventListener(MouseEvent.MOUSE_DOWN,bas_ykl) stage.addEventListener(MouseEvent.MOUSE_UP,cek_ykl) //Tıklamadan çekilince yapılacaklar için fonksiyon çağırılıyor function bas_ykl(e:MouseEvent){if(calmaVarmi){ykl_tik=true}} //Tıklama anında çalma varsa ykl_tik var. Yukarıda bunun olması halinde yapılacaklar belirlenmişti function cek_ykl(e:MouseEvent){ //Çekme anında if(calmaVarmi&&ykl_tik){kanal.stop() //Eğer çalma varsa ve ykl_tik gerçekleşmişse sesi durdur ve; if(mouseX-cubuklar.x>=cubuklar.ykl_mc.width){kanal = ses.play(ses.length*199/200)} //Sınırı aşan bir yerde bırakılmışsa sesin son kısmında oynat if(mouseX-cubuklar.x<=0){kanal = ses.play(0)} //Sıfırdan önce bir yerde bırakılmışsa sıfırdan oynat if(mouseX-cubuklar.x0){ //Eğer bu ikisi de olmamışsa yani ortada bir yerde bırakılmışsa; kanal = ses.play(ses.length*(mouseX-cubuklar.x)/cubuklar.ykl_mc.width)} //Mouse konumuna göre sesi oynat ykl_tik=false}} //Bıraktığımıza göre artık tıklama yok
Kodlar bu kadar. Bu uygulamayı kullanım için değil, bir eğitsel olarak hazırladım. Çalışmanın kaynak dosyasını aşağıdaki linkten indirebilirsiniz.
—
Kaynak Dosya:
mp3_mini.fla
——————————————————————————————-
Yazarı Takip Edin (Bilal):
Tüm Yazılar | Twitter.com/3bilal | Facebook.com/3bilal
Saolasin kardesh,ellerine saglik!Bekliyorum novbeti derslerini….
Güzel uygulama ve ders…
Çok mu fazla kod var bana mı öyle geldi
Açıkçası göründüğünün aksine uygulamanın çok ayrıntısı var. O sebeple çok if ifadesi ve boolean nesnesi falan kullanmak gerekti. Yoksa mutlaka bir yerinde tıkanıklık oluşuyordu. Genelde ayrıntılar satır sayısını arttırdı. Ama isteyen, gereksiz olduğunu düşündüğü satırı bana söyleyebilir, beraber düzeltiriz =)
çok güzel eline sağlık
peki bunu otomatik başlatmamız için ne yapmamız lazım
@Gökhan, bu playeri çok kapsamlı yapmadım, yani bazı özellikleri yok. Otomatik başlama, çoklu mp3, şarki listesi, ses düzeyi vs. gibi şeyler sonradan eklenebilir değil. Bunun gibi şeyleri yapmak için yazdığım kodu başından sonuna editlemem gerekecek. İleride mini olmayan, tam kapsamlı bir mp3 player çalışması yaparsam bu gibi özellikleri de ona eklerim. Şimdilik bu böyle kalsın =)
gerçekten aradığım bir şeydi şimdi denıyorum demo site atarım size paylaşım için teşekkürler
Merhaba ben buna bayıldım, sabahtan beri mp3 arıyorum yalnız ben bunu nasıl kullanacağım blogumda? Görüntüsü flaan bir harika lütfen yardım edin html kodu yok mu bunun?
Merhaba, beğendiğinize sevindim. Bu çalışmayı kullanımdan çok öğretmeye dayalı hazırladığım için html kodla kontrol edilebilecek şekilde yapmadım. Kullanmak için tıpkı benim bu sitede yaptığım gibi kaynak dosyayı swf olarak publish edip swf’yi yanıda mp3 ve xml dosyasıyla beraber sitenize yüklemelisiniz.
html koları olarak da paylaşabilir misiniz ?
Ben uğraştım ama yapamadım.
Xml dosyasını nasıl düzenliyoruz?
Kullandığım panelde “html” dili var.
Bunu biraz daha açıklayıcı anlatırsanız sevinirim.
Bunun için xml derslerine de baktım ancak yapamadım.
Veya direk dosyları ve yüklenme konumlarını ve şekillerini verirseniz de düzenleyerek yapabiliriz.
örnek xml’i yazının başında eklemiştim, onu alıp adres.xml diye kaydedebilirsiniz.
http://www.flashdersleri.net/wp-content/uploads/2010/05/adres.xml adresindeki xml’i okuyor mesela bu çalışma.
xml’i not defteri’nde açıp mp3 adresini ve bilgi kısmını kendimize göre değiştiriyoruz.
tebrikler
Hocam ellerine sağlık çok güzel olmuş.Ben bunu mp3 deilde Radyo Ip ve Portu kullanarak çalıştırmak istiyorum , Bu mümkünmüdür.Yardımcı olursanız sevinirim.
Örneğin;
http://RadyoIp:Port
Radyo
Bu şekilde denedim ama yapamadım.Eklemek istediginiz kod varsa paylaşırmısınız.Şimdiden teşekkürler