Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragrafları
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • HTML Onay Kutuları
  • HTML Radyo Düğmeleri
  • HTML Açılır Listeler
  • HTML Seçim Aralıkları
  • HTML Formun Ortak Öğelerini Toplamak
  • Sayfanın dilini belirtmek
  • HTML Dil Kodları
  • HTML Ülke Kodları
  • HTML Farklı Dillerde Sayfalar
  • Diğer dersler
  • Database - Veritabanları
  • HTML5 Nedir?
  • ens

K-kudo

HTML öğren

HTML araçları

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Yardım
  • Araştırma

HTML Sesleri

önceki ders sonraki ders
Sayfa içeriği
  • › Seslerin etiketleri ve özellikleri
  • › Source etiketin kullanma

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>
    kod dene 

  • controls: Bu özellik mevcutsa, tarayıcı, kullanıcının ses kaydı, ses klibinde farklı konumlara hareket etme, duraklatma ve oynatma dahil olmak üzere ses oynatmayı kontrol etmesine izin vermek için kontroller sağlayacaktır.

  • loop: Bu özellik mevcutsa, klip süresiz olarak sonuna ulaştıktan sonra baştan oynatılacaktır.
    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>
    kod dene 

  • muted: Bu özellik kullanılırsa, klipteki ses otomatik olarak kapatılır ve ses görünmesi için kullanıcının sesi açması gerekir.
    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>
    kod dene 

  • preload: Bu özelliğin amacı, tarayıcıya en iyi kullanıcı deneyimi için ne yapması gerektiği konusunda fikir vermektir ve 3 değeri vardır:
    1. none değeri eklenirse, tarayıcı kodu yok sayar ve yalnızca kodu gösterir ve kullanıcı klibi oynatana kadar klibi indirmez.
    2. auto değeri eklenirse, kullanıcının oynatması beklenmese bile tarayıcı, sayfa yükleme sırasında klibi otomatik olarak yükler.
    3. 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>
    kod dene 

    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>
    kod dene 

    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>
    kod dene 

  • src : Bu özellik, indirilecek ses dosyasının URL'sini içerir. Bu özellik isteğe bağlıdır.
  • 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>
kod dene 
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.
önceki ders sonraki ders

Kullanım Koşulları ve Gizlilik Politikası © 2021-2023 HTML öğren.