Mini Mp3 Player

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 &amp;&amp; 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&gt;=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 &amp;&amp;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) &amp;&amp; !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&amp;&amp;ykl_tik){kanal.stop() //Eğer çalma varsa ve ykl_tik gerçekleşmişse sesi durdur ve;
	if(mouseX-cubuklar.x&gt;=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&lt;=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

VN:F [1.9.11_1134]
Rating: 9.6/10 (7 votes cast)
Mini Mp3 Player, 9.6 out of 10 based on 7 ratings

13 Responses to “Mini Mp3 Player”

  1. avatar Eraser diyor ki:

    Saolasin kardesh,ellerine saglik!Bekliyorum novbeti derslerini….

  2. avatar Selçuk diyor ki:

    Güzel uygulama ve ders…

    Çok mu fazla kod var bana mı öyle geldi :)

  3. avatar Bilal diyor ki:

    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 =)

  4. avatar Gökhan UĞUR diyor ki:

    çok güzel eline sağlık
    peki bunu otomatik başlatmamız için ne yapmamız lazım :)

  5. avatar Bilal diyor ki:

    @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 =)

  6. avatar ismail diyor ki:

    gerçekten aradığım bir şeydi şimdi denıyorum demo site atarım size paylaşım için teşekkürler

  7. avatar Trigonomik diyor ki:

    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?

  8. avatar Bilal diyor ki:

    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.

  9. avatar salihrocke diyor ki:

    html koları olarak da paylaşabilir misiniz ?

  10. avatar tirintaz diyor ki:

    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.

  11. avatar Bilal diyor ki:

    ö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.

  12. avatar cnc diyor ki:

    tebrikler

  13. avatar Mustafa diyor ki:

    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

Leave a Reply

*