Sayfa içeriği
Seslerin etiketleri ve özellikleri
Genelde <audio> etiketini tarayıcıya sayfada bir ses dosyasını görüntülemek istediğimizi söylemek için kullanılıyor.
İlerleyen bölümlerde çalmak istediğimiz ses dosyasını seçmenin yollarını anlatacağım.
Çalınabilecek ses dosyası türleri
Tüm tarayıcılarda herhangi bir eklenti eklemeden çalışan formüller bunlardır:
- MP3 formatı var: En eski formatlardan biri olduğu ve tüm cihazlarla uyumlu olmasıyla çok iyi biliniyor ve bu nedenle hala en yaygın olarak kullanılıyor.
- Apple tarafından sıklıkla kullanılan başka bir format olan ACC formatı daha vardır, ve bu format yüksek kalitededir.
- Ayrıca ücretsiz kaynak programlarında yaygın olarak kullanılan OGG formatı olan üçüncü bir format daha vardır ve avantajı ücretsiz olmasıdır, yani herhangi bir patentle korunmamaktadır.
- Bir de sıkıştırılmamış format olan WAV formatı var ve bu tarzdaki sesin boyutu büyük olduğundan ve diğer formatlara göre indirmesi daha uzun sürdüğü için çok kullanmanı tavsiye etmiyorum.
Her formül yalnızca birkaç tarayıcıda çalıştığından, tüm tarayıcılarda çalışan bir formül olmadığını da bilmelisin.
Örneğin, MP3 formatı Internet Explorer, Google Chrome, Safari ve Brave'de çalışır, ancak Firefox ve Opera'da çalışmaz.
OGG formatı Google Chrome, Firefox, Opera ve Brave'de çalışan ancak Internet Explorer ve Safari'de çalışmaz.
Ancak bu sorunun birçok çözümü var ve bunların en iyisi koda birden fazla formül eklemektir ve bunların hepsini aşağıda göreceğiz.
<audio> Etiketin özellikleri
- autoplay: Ses dosyasının sayfa yüklenmekten sonra otomatik olarak oynatılması için autoplay özelliği kullanılır ve Çoğu tarayıcının bu özelliği desteklemediğini ve gerekli olmadıkça bu özelliğin kullanılmasını önermediğimi ve eklenmesi gerekiyorsa, kullanıcıdan izin istemek daha iyidir ve bunu Javascript'te öğreneceğini unutma.
burada bir örnek için'de otomatik olarak başlıyacak bir ses dosyası ekledim.
- <audio src="https://code.k-html.com/kodlar/audio.mp3" controls autoplay>
- Tarayıcınız ses dosyası biçimini desteklemiyor
- </audio>
Aşağıdaki örnek, klibi tamamlandıktan sonra oynatmak için loop özelliğine sahip <audio> öğesini kullanılan bir kod ekledim.
- <audio src="https://code.k-html.com/kodlar/audio.mp3" controls loop>
- Tarayıcınız ses dosyası biçimini desteklemiyor
- </audio>
Burada muted özelliğinin kullanımıyla ilgili bir örnek ekledim.
- <audio src="https://code.k-html.com/kodlar/audio.mp3" controls muted>
- Tarayıcınız ses dosyası biçimini desteklemiyor
- </audio>
- none değeri eklenirse, tarayıcı kodu yok sayar ve yalnızca kodu gösterir ve kullanıcı klibi oynatana kadar klibi indirmez.
- auto değeri eklenirse, kullanıcının oynatması beklenmese bile tarayıcı, sayfa yükleme sırasında klibi otomatik olarak yükler.
- metadata değeri eklenirse tarayıcı, klibin kendisini değil, yalnızca klip biçimi, uzunluğu ve boyutu gibi klibin temel verilerini yükler.
Bu özelliğin değeri ayarlanmazsa, tarayıcıdan varsayılan değer alınacaktır (her tarayıcının kendi varsayılan değeri vardır), ancak değerin metadata olmasını tavsiye ederim.
autoplay önyüklemeye göre önceliği olduğunu unutma, bu nedenle otomatik oynatma ayarlanırsa tarayıcı ses dosyası otomatik olarak indirmeye başlar.
Tarayıcının preload kodundan isteneni yapmak zorunda olmadığı ve gerekenden farklı bir şey yapabileceğine dikkat edilmelidir, çünkü preload kodu tarayıcıya site programcısın ne istediğinin bir özetini vermek içindir, ve tarayıcı gerekli işi yapmak zorunda değildir.
Daha basit bir şekilde anlatacağım.
preload kodunu ekledin ve auto özelliğini ekledin tamam mı?.
Bu durumda tarayıcı hemen dosyayı indirmeye başlayacak, yoksa öyle mi düşünüyorsun?.
Kullanıcı istemedikçe dosyaların otomatik olarak indirilmemesi için ayrılmış tarayıcılar vardır ve sen indirmemesini söylesen bile dosyayı indiren tarayıcılar vardır.
Dosyanın otomatik olarak indirilmesini engelleyen bazı reklam engelleyici eklentilerin bulunduğunu ve hepsinin değil de bazı eklentilerin olduğunu belirtmek gerekir.
Burada none değeri ile bir örnek ekledim.
- <audio src="audio.mp3" preload="none" controls>
- Tarayıcınız ses dosyası biçimini desteklemiyor
- </audio>
Burada auto değeri ile bir örnek ekledim.
- <audio src="audio.mp3" preload="auto" controls>
- Tarayıcınız ses dosyası biçimini desteklemiyor
- </audio>
Burada metadata değeri ile bir örnek ekledim.
- <audio src="audio.mp3" preload="metadata" controls>
- Tarayıcınız ses dosyası biçimini desteklemiyor
- </audio>
Ne?, bir dakika, src özelliği nasıl isteğe bağlı olabilir?
Peki ses dosyası URL'si nasıl eklenecek? Bu soruda düşündün mü?
Peki merak etme şimdi her şeyi açıklayacağım .
Eklemek istediğin ses dosya'nin URL'sini belirtmek için <audio> öğesinin içindeki <source> öğesini kullanabilirsin.
<audio> etiketinde src özeliğini kullanamaya bilirsin ve onu <source> etiketinin içine ekleyebilirsin ve biraz daha sonra anlatacağım.
Ancak src özelliği önemlidir ve ses dosyasını getiren o olduğundan vazgeçilemez, ancak isteğe bağlı olmaktan kastettiğim sadece <audio> etiketinin içine ve <source> etiketinin içine eklenebilir, ve aşağıda açıklayacağım şey bu.
Source etiketin kullanma
<source> Kodu, kullanmanı tavsiye ederim, çok önemli bir koddur ve şimdi nasıl kullanılacağını ve faydalarını göreceğiz.
<source> Etiketinin çalışma şekli, <audio> etiketinin içine <source> etiketini eklemektedir, öyleyse neden <audio> etiketini normal bir şekilde kullanmıyoruz ve <source> kodu daha çok tercih ediyorum acaba? ..
Bunu basit bir şekilde anlatacağım, Google'de bir film izlemeye gittiğinde seni filmi oynatmak için birkaç sunucu gösteriyor değil mi? Ve eğer sunucu çalışmıyorsa, başka bir tane seçersin, değil mi?
<source> Kodu için aynıdır, ancak sunucuları kullanıcıya göstermez, bunun yerine otomatik olarak kendi kendine dener ve dosyayı normal olarak <audio> koduna eklenmiş gibi kullanıcıya gösterir.
Eğer anlamadıysan, endişelenme! Örneklere baktıktan sonra anlayacaksın, ses dosyasına birden fazla kaynak eklemeni yeterli ve ilk ses dosyası çalışmıyorsa tarayıcı ikinci dosyayı deneyecektir.
Öncelikle kullanmak istediğimiz özellikleri <audio> kodunun içine ekliyoruz ve içine <source> kodlarını ekliyoruz.
Buraya 4 farklı formülle bir örnek ekledim, ilk formülün çalışmaması durumunda sonraki formünü otomatik olarak deneyecektir.
controls özelliğini eklediğimiz için tarayıcı kontrol düğmelerini gösterecek ve metadata özelliğini eklediğimiz için tarayıcı dosyayı otomatik olarak oynatmaya hazırlayacak ve çalışacağı ilk formatı seçecektir.
Yani tarayıcı dosyayı indirmeye hazırlayacaktır, ancak ses dosyayı indirmeyecek ve kullanıcının ses dosyasını başlayana kadar indirmiyecek.
- <audio preload="metadata" controls>
- <source src="audio.mp3">
- <source src="audio.ogg">
- <source src="audio.aac">
- <source src="audio.wav">
- Tarayıcınız ses dosyası biçimini desteklemiyor!
- </audio>
Peki sorulması gereken önemli bir soru var, eğer çok fazla yedek sunucu kullanıyorsan bu sitede ağırlık yaratır mı?
Cevap evet, çok fazla yedekleme sunucusu kullanmak siteye ağır bir yük bindirecektir.
auto Özelliğini ekliyorsan siteni neden yavaş diye sorma ama metadata özelliği yada none özelliği kullanırsan çok sayıda dosya eklemekte sorun yok ama 3 den fazla eklemeni tavsiye etmem çünkü kullanıcı dosyayı indirmeye başlayınca sayfa ağırlaşacaktır.