HTML Ses

Video dersi hareketli görüntüleri öğretti. Ses, yalnızca sesli kuzenidir: podcast’ler, sesli notlar, ders girişleri ve kısa efektler. Öğe audio. İnsanların kendi terimleriyle oynatması için controls ile başlayın — video’daki aynı nezaket — poster, ekran görüntüsü veya ayrılmış video kutusu olmadan. İnce bir kontrol çubuğu media/ klasöründen dosya alır ve düzeni tam klipten daha sakin tutar.

audio ne yapar

audio, tarayıcıdan bir ses dosyası getirmesini ve kompakt bir oynatıcı göstermesini ister. src ile tek dosya koyabilir veya tarayıcının anladığı biçimi seçmesi için birkaç <source> çocuğu listeleyebilirsiniz. video gibi görsel tuval yoktur; controls varken genelde ince bir çubuk görülür. Zaman çizelgesi, sessiz ve ses seviyesi hâlâ önemlidir çünkü ses, yüksek bir video kadar sessiz bir odayı bölebilir. Oynatıcıyı ziyaretçinin kullandığı bir araç gibi düşünün, kendi kendine başlayan arka plan gibi değil.

Doğrudan yanıt

<audio controls src="sound.mp3"> yazın veya MP3 ve Ogg gibi biçimler için birkaç <source> iç içe koyun. Öğe içinde kısa yedek metin (ve isteğe bağlı indirme bağlantısı) bırakın. Web için sıkıştırılmış dosyaları tercih edin. Sesli sürpriz otomatik oynatmadan kaçının. Klip konuşarak öğretiyorsa oynatıcının yanında döküm veya net notlar planlayın.

Yeni başlayanların gördüğü biçimler

Tarayıcılar aynı kodeği tercih etmez. Yeni başlayanlar genelde MP3 ile başlar, ikinci aday olarak Ogg ekler. WAV yerel düzenleme için iyidir ama tek web kopyası olarak çoğu zaman çok büyüktür. Aşağıdaki tablo pratik bir başlangıç haritasıdır — kodek ansiklopedisi değildir.

controls ile basit ses

Kısa bir MP3 artı controls birçok alıştırma sayfası için yeterlidir. Dosyayı media/ altına koyun, yolu görsel URL’leri gibi doğrulayın. Çubuk görünür ama oynatma olmazsa geliştirici araçlarını açın veya dosya URL’sini doğrudan deneyin — bozuk yollar sessizce başarısız olur.

Basit örneği okumak

• controls oynat, duraklat, sar ve çoğu zaman ses seviyesini gösterir
• src sayfaya göre ses dosyasını gösterir (burada media/ altında)
• İç metin öğe oynatamadığında yedektir
• Burada poster yoktur — o video’ya aittir
• Temel bir ses çubuğu için genelde video’daki gibi width gerekmez

Birden çok kaynak ve indirme bağlantısı

type içinde MIME değerleriyle Ogg ve MP3 listelemek oynatılabilir bir aday bulma şansını artırır. Sıra önemlidir: tarayıcı çözümleyebileceği bir şey bulana kadar listeyi gezer. İndirme bağlantısı oynatma başarısız olduğunda veya kaydetmek isteyene yardım eder. İki biçim dışa aktarırken her dosyada aynı ders içeriğini tutun.

Çok kaynaklı örneği okumak

• Kaynaklar sırayla denenir ta ki tarayıcı oynatılabilir birini bulsun
• type desteklenmeyen biçimleri hızla atlamaya yardım eder
• İndirme bağlantısı audio içinde insan dostu yedektir
• Dosya adlarını ve klasörleri doğru tutun — src yazım hatası “bozuk oynatıcı” gibi görünür
• Küçük demolar için hâlâ tek src kullanabilirsiniz; çok kaynak dayanıklılık yükseltmesidir

Kulaklara ve bant genişliğine saygı

Açık kullanıcı eylemi olmadan sesli otomatik oynatma çoğu zaman engellenir ve genelde kaba olur. controls yoksa ziyaretçi nazikçe duraklatamaz. Uzun sıkıştırılmamış WAV, kompakt bir MP3 aynı fikri öğretirken mobil veriyi boşa harcayabilir. Web boyutlu sesi web boyutlu video gibi dışa aktarın. Sonraki arka plan müziği onay ve sessiz ile ayrı bir tasarım kararıdır — yeni başlayan ders sayfasının varsayılanı değildir.

Konuşma öğretirken döküm

Klip bir kavramı sözcüklerle açıklıyorsa sayfada döküm veya net notlar planlayın. audio, img gibi alt kullanmaz. Konuşmanın erişilebilirliği metin alternatifleri, oynatıcının yanında net başlıklar ve kullanıcı kontrolüdür — poster görüntüsü değil. Konuşulan ipucunu yeniden söyleyen kısa bir paragraf bile şimdi dinleyemeyenlere yardım eder.

Ses vs video vs gömmeler

• Kendi barındırdığınız ses dosyası → audio
• Görüntülü kendi barındırdığınız klip → video
• Başka siteden oynatıcı sayfası → çoğu zaman iframe (sonraki derste YouTube tarzı gömmeler)
  Podcast’i yalnızca orada önce controls gördünüz diye video içine koymayın. audio yeterken yerel MP3’ü iframe’e sarmayın. Öğeyi medya türüyle eşleştirin.

Düzenleyicide alıştırma

1. media/ altına kısa bir .mp3 ekleyin (on ila otuz saniye yeter).
2. Doğru göreli yol ile audio controls kullanarak gömün.
3. Tarayıcı UI ile oynatın, duraklatın, sarın ve sesi ayarlayın.
4. İsteğe bağlı: ikinci bir source türü ve indirme bağlantısı ekleyin.
5. Klip konuşuyorsa oynatıcının yanında bir cümle döküm veya not yazın.
6. Kimse play basmasa bile sayfanın hâlâ anlamı olduğunu doğrulayın.

Kolay hatalar

• Açık kullanıcı eylemi olmadan sesli otomatik oynatma
• Eksik controls
• MP3 yeterken kocaman sıkıştırılmamış WAV bağlamak
• audio üzerinde poster beklemek
• Yedek metin veya indirme yolunu unutmak
• YouTube tarzı iframe gömmeleri kendi barındırılan audio ile karıştırmak
• Testte her source içinde farklı konuşulan içerik
• Bozuk media/ yolu ve tarayıcıyı suçlamak

Özet

• audio barındırdığınız ses dosyalarını gömer
• controls ile ziyaretçi oynatır, duraklatır ve sarar
• type ipuçlarıyla birden çok source biçimi desteği iyileştirir
• Sıkıştırılmış dosyaları ve kullanıcı başlatmalı oynatmayı tercih edin
• Konuşulan içerik dersi taşıyorsa döküm veya not planlayın
• Ses için audio, görüntü+ses için video, dış oynatıcılar için iframe