HTML5 Canvas Etiketi ( 17.Ders Canvas İle Renklendirmeler)

<canvas> Etiketimizle Renklendirmeler Yapacağız Bunun İçin 2 Metot Kullanacağız biri Düz Renk Geçişleri Sağlayacağımız createLinearGradient diğeri oval geçiş sağlayabileceğimiz createRadialGradient metotlarımızla renklendirmeler yapacağız. Fazla Uzatmadan hemen örneğimize bakarak nasıl renk geçişleri sağlayacağımıza bakalım..

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-17.Ders-Canvas-İle-Renklendirmeler.html” icon=”” target=”true”]Örnek Çalışma[/button]

Gradient Kullanımları

  1. createLinearGradient(x,y,x1,y1)
  2. createRadialGradient(x,y,r,x1,y1,r1)

İlk Olarak Canvas alanımızda düz geçişleri sağlayacağımız createLinearGradient metodumuzu kullanalım bunun için Canvas İle Bir Çalışma Alanı oluşturalım

<canvas id="resimalani4" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
	var c = document.getElementById("resimalani4");
	var ctx = c.getContext("2d");

	var grd = ctx.createLinearGradient(100,0,300,0);
	grd.addColorStop(0,"#F88C00");
	grd.addColorStop(1,"black");

	ctx.fillStyle = grd;
	ctx.fillRect(10,10,480,480);
</script>

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık.

var c = document.getElementById(“resimalani4”); Komutumuz İle id si resimalani4 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”);  Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.
var grd = ctx.createLinearGradient(100,0,300,0); Komutumuzla renk geçiş komutlarını belirliyoruz sırasıyla şu şekilde değerler verdik

100 : soldan sağa turuncu rengimiz 100px e kadar renk değişmeden devam etsin  siyah renge 100px den sonra geçiş yapsın dedik.

0 : Komutumuz soldan sağa düz bir renk geçişi sağlanmasını sağladık buraya ekleyeceğiniz değer ile renk geçişinin kare içindeki değişimini farkedebilirsiniz burasıda y düzlemi içindeki başlangıç değerini belirler

300: Komutumuz ile siyah rengimizin başlangıcını belirledik ilk değerde verdiğimiz 100 ile 300 arasında renk tonlaması oluşturduk.

0: Komutumuzla 2. değerde verdiğimiz y düzleminin tersi yönünde başlangıç belirleyebilirsiniz başlatabilirsiniz

grd.addColorStop(0,”#F88C00″); Komutumuz ile 0 değerindeki yani ilk renk alanımıza #F88C00 renk kodumuzla turuncu tonlarında bir renk değeri belirledik

grd.addColorStop(1,”black”); Komutumuz ile 1 değerindeki ikinci renk alanımıza siyah renk olmasını tanımladık bu sayede renk geçişinin nasıl olduğunu daha iyi fark edebileceğiz.
ctx.fillStyle = grd;  Komutumuzla Çalışma Alanımızı Oluşturacağız.

ctx.fillRect(10,10,480,480); Komutumuz İle Alanımıza Boyutlandırmaları ve yerleşimini sağlayacağız

ilk değerimiz olan 10 ile soldan sağa x düzleminde 10px lik bir boşlukla başlayacak yine aynı şekilde 2 değerimizde 10 ile yukarıdan aşağıya y düzleminde 10px boşlukla başlayacak cizimimiz.

3 ve 4 değerlerimizde alanımızın kaplayacağı boyutu belirliyoruz 480,480 ile 480px genişliğinde ve yüksekliğinde bir kare oluşturuyoruz.

Renk Geçişlerimizi yukarıdaki ctx.createLinearGradient içinde belirliyoruz.

Örnek Kodlarda verdiğimiz değerlerde ufak değişiklikler yaparak hangi değerinm nerede işlem yaptığına bakabilirsiniz.

 

Ve İkinci canvas alanımızıda da createRadialGradient ile oval bir renk geçişi sağlayalım bunun için bir canvas alanı belirleyelim

<canvas id="resimalani5" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
	var c = document.getElementById("resimalani5");
	var ctx = c.getContext("2d");

	var grd = ctx.createRadialGradient(340,140,40,340,140,150);
	grd.addColorStop(0,"#F88C00");
	grd.addColorStop(1,"#44e9e5");

	ctx.fillStyle = grd;
	ctx.fillRect(10,10,480,480);
</script>

var c = document.getElementById(“resimalani5”); Komutumuz İle id si resimalani3 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”); Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.

var grd = ctx.createRadialGradient(340,140,40,340,140,150); Komutumuz İle Asıl Değerlerimizi Burada Oluşturuyoruz.

createRadialGradient(x,y,r,x1,y1,r1) Değerimize bakarak

createRadialGradient metodumuzun içindeki ilk 3 parametre oluşturduğumuz turuncu alanımızı oluşturmamıza yarıyor 340px soldan sağa boşlukla başla 140px yukarıdan aşağıya boşlukla başla ve 40px çapında bir daire oluşturmasını istiyoruz.

Son 3 parametrede dış alanımızı belirliyor ve iç alanla aradaki renk geçişlerinin oluşmasını sağlıyor aynı alanda ve tam bir çember olması için 340px soldan sağa boşlukla başla 140px yukarıdan aşağıya boşlukla başla komutlarını belirtkten sonra 150px çapında bir daire oluşturarak renk katmanlarımızı oluşturuyoruz.

grd.addColorStop(0,”#F88C00″); Komutumuz İle İç alanda oluşturduğumuz turuncu rengi belirledik.

grd.addColorStop(1,”#44e9e5″); Komutumuz İle dış alanda oluşturduğumuz turkuaz rengi belirledik.

ctx.fillStyle = grd; Komutumuzla Çalışma Alanımızı Oluşturacağız.

ctx.fillRect(10,10,480,480); Komutumuz İle Alanımıza Boyutlandırmaları ve yerleşimini sağlayacağız

ilk değerimiz olan 10 ile soldan sağa x düzleminde 10px lik bir boşlukla başlayacak yine aynı şekilde 2 değerimizde 10 ile yukarıdan aşağıya y düzleminde 10px boşlukla başlayacak cizimimiz.

3 ve 4 değerlerimizde alanımızın kaplayacağı boyutu belirliyoruz 480,480 ile 480px genişliğinde ve yüksekliğinde bir kare oluşturuyoruz.

Renk Geçişlerimizi yukarıdaki ctx.createRadialGradient içinde belirliyoruz.

Çalışmalarda Değerleri Değiştirerek Nasıl Değişimler olduğuna bakarak mantığını iyice kavrayın umarım yararlı bir yazı olmuştur aklınıza takılan soruları yorum bölümünde sorabilirsiniz.

Güvenilir Marka Uğur Soğutma

Bir markanın güvenilir olduğunu nasıl anlarsınız? Elbette bağımsız ve saygın test kuruluşlarının raporlarını takip ederek. Reklamlar ve promosyonlara aldanmayın, bir markanın ne kadar güvenilir olduğu ve müşteri memnuniyetini ne denli önemsediği, ancak sahip olduğu sertifikalar sayesinde anlaşılabiliyor. Bu bakımdan, Almanya merkezli GC Mark, Avrupa’nın en saygın denetleme ve sertifikalandırma firmalarından biri sayılıyor. Firmaların hammadde işlemesinden üretimine, paketlemesinden satışa sunulmasına dek pek çok farklı unsurunu uluslararası standartlara göre denetleyip değerlendiren bağımsız bir kuruluş olan GC Mark, dünyanın en saygın ve prestijli sertifikalarını veriyor. GC Mark sertifikasına sahip olan bir şirketin ISO 9001, IS0 10001, 2, 3, 4 standartlarına uygun üretim ve kalite kontrolü yaptığına, sürekli olarak gelişime açık bir üretim ve yönetim yapısına sahip olduğuna emin olabilirsiniz.

Dünyada sayılı şirketin sahip olduğu GC Mark Verified Customer Satisfaction (Kanıtlanmış Müşteri Memnuniyeti) sertifikasına sahip olan tek Türk şirketi, hâlihazırda sektörde 60 yılı aşkın bir deneyime sahip olan Uğur Soğutma. Müşteri memnuniyetine verdiği önemi Avrupa’nın en büyük bağımsız denetim kuruluşlarından biri olan GC Mark Verified Curstomer Satisfaction denetimini başarıyla tamamlayarak elde ettiği sertifikayla global düzeyde ispat eden Uğur Soğutma, böylelikle ürünlerinin kalitesi kadar tüketici deneyimine verdiği önemi de bir kez daha göstermiş oluyor. İki yıl boyunca Türkiye’de aynı sektördeki başka hiçbir markanın alamayacağı bu sertifika, Uğur Soğutma’nın müşterilerine vermiş olduğu değer ve önemi mükemmel bir şekilde yansıtıyor. Uğur Soğutma, ürünlerinde GC Mark sertifikası amblemini kullanma hakkını da elde etmiş oluyor.

Diğer bir deyişle, Uğur Soğutma ürünlerinin kalitesi, global düzeyde bir kez daha tasdik edilmiş oluyor. Uğur Soğutma’nın çevrimiçi mağazasından ve bayilerinden satın aldığınız ürünlerden memnun kalacağınıza emin olabilirsiniz: Hem Uğur Soğutma, hem de GC Mark bunu garanti ediyor!

Bir boomads advertorial içeriğidir.

HTML5 Canvas Etiketi ( 16.Ders Canvas İle Çember ve Oval Cizimler )

<canvas> Etiketimizle Çember ve Oval Çizimler İçin arc Metodumuzu Kullanıyoruz Bu Metotları JavaScript Derslerimizde Tekrar Ederek ve Çeşitli Metotları Öğrenerek Daha Güzel Tasarımlar Oluşturabiliriz.

arc(x,y,r,start,stop) metodunda tanımlamamız bu şekilde olacak

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-16.Ders-Canvas-İle-Çember-ve-Oval-Cizimler-.html” icon=”” target=”true”]Örnek Çalışma[/button]

İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım

<canvas id="resimalani3" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
      var c = document.getElementById("resimalani3");
      var ctx = c.getContext("2d");	
      ctx.beginPath();
      ctx.arc(150,350,100,0,2*Math.PI);
      ctx.stroke();
</script>

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık.

var c = document.getElementById(“resimalani3”);  Komutumuz İle id si resimalani3 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”); Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.

ctx.beginPath(); Metodu ile bir çizim yapılacağını bildiriliyoruz. İşlemler Bittiğinde İse stroke veya fill yöntemi İle Çizimi Bitirdiğimizi Belirtiyoruz.

ctx.arc(150,350,100,0,2*Math.PI); arc metodumuzun içinde belirteceğimiz parametrelerle başlangıç bölgelerini ve boyutlandırmalarını yapacağız.

İlk İki Komutumuzda başlama noktalarını belirtiyoruz 150 soldan 350 yukarıdan boşluklarla başlayacağımızı belirttik. 100 parametremizlede çemberimizin boyutunu tanımladık, 0 komutumuzla açıklık kalmadan tam bir daire olmasını tanımladık 10 gibi bir değer belirtseydik tamamen iki ucu birleşmeden yarım kalırdı çember oluşturabilmek için 0 komutu kullanıyoruz. 2*Math.PI komutumuzla da yarı çapının pi sayısını alıp 2 ile çarpıyoruz. ve çemberimizi oluşturan parametreleri tanımlamış oluyoruz.

ctx.stroke(); Komutumuz ile bunun bir başlangıç ve bitiş kordinatlarının olacağı bir çizği olacağını tanımladık.

HTML5 Canvas Etiketi ( 15.Ders Canvas Yol Belirleme )

<canvas> Etiketimiz İçinde Çizim Yollarını Belirlemek için Hemen Örneğimize Geçelim

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-15.Ders-Canvas-Yol-Belirleme-.html” icon=”” target=”true”]Örnek Çalışma[/button]

İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım.

<canvas id="resimalani2" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor. JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
   var c = document.getElementById("resimalani2");
   var ctx = c.getContext("2d");
   ctx.moveTo(10,20);
   ctx.lineTo(400,450);
   ctx.stroke();
</script>

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık..

var c = document.getElementById(“resimalani2”);  Komutumuz İle id si resimalani2 olan canvas alanında çalışma yapacağımızı belirttik.

var ctx = c.getContext(“2d”); Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.

ctx.moveTo(10,20); Komutumuz İle Çizimimizin Başlangıç Yolunu belirledik.

10 : Soldan Sağa 10px.  ile başlamasını tanımladık.

20 : Yukarıdan Aşağıya 20px. ile başlamasını tanımladık.

ctx.lineTo(400,450); Komutumuz İle Çizimimizin Bitiş Noktasını Tanımladık

400 : Soldan Sağa Doğru 400px. de bitimini tanımladık.

450 : Yukarıdan Aşağıya 450px. de bitimini tanımladık.

ctx.stroke(); Komutumuz ile bunun bir başlangıç ve bitiş kordinatlarının olacağı bir çizği olacağını tanımladık.


	

HTML5 Canvas Etiketi ( 14.Ders Canvas İle Çalışma Alanı Oluşturma)

<canvas> Etiketimiz web sayfalarında çeşitli grafikler oluşturmamıza ve geometrik çalışmalar yapabilmemiz için div gibi çalışma alanını belirleyen tutucudur . Canvas etiketimizi resim yapmak için kullandığımız boş bir sayfa olarak düşünebilirsiniz bunun üzerine resimi yapabilmek için bir ressama ihtiyacımız var buda javascript veya buna benzer kodlama dilleri olabilir. Javascrip Bildiğinizi varsayarak örneğimizi hemen yapalım.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Canvas-Etiketi-14.Ders-Canvas-İle-Çalışma-Alanı-Oluşturma.html” icon=”” target=”true”]Örnek Çalışma[/button]

İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım

<canvas id="resimalani1" width="500" height="500" style="border:1px solid #000000"></canvas>

Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.

width=”” height=”” style=”” ile Klasik Boyutlandırmaları  Oluşturduk.

</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.

<script>
        var c=document.getElementById("resimalani1");
	var ctx=c.getContext("2d");
	ctx.fillStyle="#999";
        ctx.fillRect(10,20,200,300);
</script>

canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık.

var c=document.getElementById(“resimalani1”);  id olarak resimalani1 ismini verdiğimiz canvas alanımızı Script Komutumuzun içinde belirttik biz artık bu alanda çalışıyor dedik.

var ctx=c.getContext(“2d”); Komutumuz ile Alanda Bir Nesne Oluşturacağımızı Bildirdik Bu ve bunun Gibi Birçok Metodu JavaScript Derslerimizde Öğreneceğiz.

ctx.fillStyle=”#999″; Komutumuz İle Bu Nesnemize Bir renk Oluşturduk.

ctx.fillRect(10,20,200,300); Komutumuz İle Gerekli Boyutlandırmaları ve Kordinatlarını belirledik.

ctx.fillRect Metodunun içinde vermiş olduğumuz parametreler sırasıyla şu şekildir.

İlk İki Parametremiz oluşturduğumuz Dikdörtgenimizin canvas Alanımızın Kordinatıdır x ve y düzlemlerini belirtir.

Son İki Parametremiz Dikdörtgenimizin Boyutlarıdır.

10 : Oluşturduğumuz Dikdörtgen Soldan Sağa Doğru 10px bir Boşlukla Başlasın.

20 : Oluşturduğumuz Dikdörtgen Yukarıdan Aşağıya Doğru 20px bir Boşlukla Başlasın.

200 : Dikdörtgenimizin Genişliği 200px Olsun

300 : Dikdörtgenimizin Boyu 300px Olsun


 

HTML5 hgroup Etiketi ( 13.Ders h1…h6 Etiketlerini Guruplandırma)

<hgroup> Etiketimiz Sayfamızda birden fazla alt alta başlık tanımlayacağımız zaman kullanılır.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-hgroup-Etiketi-13.Ders-h1…h6-Etiketlerini-Guruplandırma.html” icon=”” target=”true”]Örnek Kullanımı[/button]


 

HTML5 Embed Etiketi ( 12.Ders İçerik Çekme )

<embed> Etiketimizle Sayfanız Dışında Başka Bir Sayfadan veya Alandan Kaynak, İçerik, Eklenti Gibi Birçok Özelliği Sayfamıza Dahil Etmemize Yarayan Etiketimizdir.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Embed-Etiketi-12.Ders-İçerik-Çekme-.html” icon=”” target=”true”]Örnek Çalışma[/button]


Diyelim ki Bilgebank Sitemizin Logosunu Sayfanıza dahil etmek istiyorsun <embed> etiketimiz içinde src=” ile çekmek istediğiniz alanın url adresini belirliyorsunuz  height=”” width=”” Değerleri ile de boyutunu ayarlayabilirsiniz.

HTML5 Progress Etiketi ( 11.Ders Bar Göstergesi )

<progress> Etiketimiz Bir görevin, işlemin ilerleme veya tamamlanma sürecini görsel olarak göstermemizi sağlayan çok kullanışlı bir etiketimizdir.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Progress-Etiketi-11.Ders-Bar-göstergesi-.html” icon=”” target=”true”]Örnek Çalışma[/button]


Etiketimizde 2 Özellik Tanımlamamız Yeterlidir max=”” belitgecimizle Son Durum Değerini value=”” Değerinde İse Mevcut Değerini Belirtebilirsiniz.

HTML5 Video Etiketi ( 10.Ders Video Oynatıcısı )

<video></video> etiketimiz bir HTML belgesinde video elementini oynatmak için kullanılır.  Kullanımı Çok Basit ve Kullanışlıdır.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Video-Etiketi-9.Ders-Video-Oynatıcısı-.html” icon=”” target=”true”]Örnek Çalışmamız[/button]


src=”” İle İçeriğimizin Dosya Yolunu Belirtiriz.

type=”” İle de Dosya Formatımızı Belirleriz

controls=”controls” Komutumuz İle video Özelliğimizin Başlat, Durdur, Ses, İndirme, Tam Ekran Gibi Özelliklerinin Görünmesini Sağlar.

autoplay=”autoplay” Komutumuz İle video Özelliğimizin Tarayıcı Açıldıktan Sonra Otomatik Olarak Başlamasını Sağlar.

loop=”loop” Komutumuz İle Biten Videonun Tekrardan Otomatik Başlamasını Belirtir.

muted=”muted” Komutumuz İle video Özelliğimizin Sessiz Olarak Başlamasını Belirtiriz.

preload=”auto” Komutu İle Videonun Sayfa Yüklenirken Ön Belleğe Almasını Tanımlarız; preload=”none” İse tam Tersi Olarak Ön Yükleme Olmamasını Belirtiriz

poster=”” Komutumuz İle Video Başlamadan Önce Video Panelinde Görünmesini İstediğimiz Görseli Belirtiriz.

 

HTML5 Audio Etiketi(9.Ders Ses Dosyası Oynatıcısı)

Audio etiketimiz isminden de anlaşıldığı gibi ses dosyalarını web sayfalarımızda çalıştırmamıza yarar 3 ses formatını destekler. Ancak tarayıcılarda farklılık gösterebilir desteklediği ses formatları mp3, wav, ogg formatlarıdır mp3 formatı tüm tarayıcılarda sorunsuz çalışır.

[button color=”red” size=”small” link=”http://www.bilgebank.com/wp-content/uploads/2017/10/HTML5-Audio-Etiketleri9.Ders-audio-Kullanımı.html” icon=”” target=”true”]Örnek Çalışma[/button]

<audio >
     <source src="http://www.bilgebank.com/wp-content/uploads/2017/10/Ed-Sheeran-Shape-of-You.mp3" type="audio/mp3">
          <p style="color:red;">Tarayıcınız Audio Etiketini Desteklememektedir.</p>
</audio>

src=”” İle Dosya Yolumuzu Belirtiriz.

type=”” İle de Dosya Formatımızı Belirleriz.

controls=”controls” Komutumuz İle Audio Özelliğimizin Başlat, Durdur, Ses, İndirme Gibi Özelliklerinin Görünmesini Sağlar.

autoplay=”autoplay” Komutumuz İle Audio Özelliğimizin Tarayıcı Açıldıktan Sonra Otomatik Olarak Başlamasını Sağlar.

loop=”loop” Komutumuz İle Biten Parçanın Tekrardan Otomatik Başlamasını Belirtir.

muted=”muted” Komutumuz İle Audio Özelliğimizin Sessiz Olarak Başlamasını Belirtiriz.

Audio Özelliğimizin Üç Adet Ses Biçimi vardır: MP3, Wav ve Ogg.