HTML Ses

HTML'de ses oynatma yöntemleri birçok.

Sorunlar, sorunlar ve çözümler

HTML'de ses oynatmak kolay değil!

Sizin çok sayıda teknik bilgiye hakim olmanız gerekiyor, böylece ses dosyanız tüm tarayıcılar (Internet Explorer, Chrome, Firefox, Safari, Opera) ve tüm donanımlarda (PC, Mac, iPad, iPhone) oynatabilsin.

Bu bölümde, CodeW3C.com sizi sorunları ve çözümleriyle tanıştırıyor.

Eklentileri kullanın

Tarayıcı eklentileri, tarayıcı standart işlevlerini genişleten küçük bilgisayar programlarıdır.

Eklentiler birçok kullanım için vardır: müzik oynatma, harita görüntüleme, banka hesapları doğrulama, giriş kontrolü vb.

<object> veya <embed> etiketlerini kullanarak HTML sayfasına eklenti ekleyebilirsiniz.

Bu etiketler kaynakların (genellikle HTML olmayan kaynaklar) konteynerlerini tanımlar. Türüne göre, hem tarayıcı hem de dışarıdan yüklenen eklentiler tarafından görüntülenir.

<embed> unsuru kullanın

<embed> etiketi dışarıdan (HTML olmayan) içeriğin bir konteyneri tanımlar. (Bu bir HTML5 etiketi, HTML4'te yasaktır, ancak tüm tarayıcılarda geçerlidir).

Aşağıdaki kod parçası web sayfasına gömülü MP3 dosyasını görüntüleyebilir:

Örnek

<embed height="100" width="100" src="song.mp3" />

Kişisel olarak deneyin

Soru:

  • <embed> etiketi HTML 4'te geçersizdir. Sayfa HTML 4 doğrulamasını geçemez.
  • Farklı tarayıcılar audio formatlarını farklı destekler.
  • Tarayıcı bu dosya formatını desteklemiyorsa ve eklenti yoksa bu ses oynatılamaz.
  • Kullanıcının bilgisayarında eklenti yüklenmemişse ses oynatılamaz.
  • Bu dosyayı diğer formatlara dönüştürseniz bile tüm tarayıcılarda oynatılamaz.

Açıklama:<!DOCTYPE html> (HTML5) ile doğrulama sorunlarını çözmek için kullanın.

<object> unsuru kullanın

<object tag> etiketi dışarıdan (HTML olmayan) içeriğin bir konteyneri olarak tanımlanabilir.

Aşağıdaki kod parçası web sayfasına gömülü MP3 dosyasını görüntüleyebilir:

Örnek

<object height="100" width="100" data="song.mp3"></object>

Kişisel olarak deneyin

Soru:

  • Farklı tarayıcılar audio formatlarını farklı destekler.
  • Tarayıcı bu dosya formatını desteklemiyorsa ve eklenti yoksa bu ses oynatılamaz.
  • Kullanıcının bilgisayarında eklenti yüklenmemişse ses oynatılamaz.
  • Bu dosyayı diğer formatlara dönüştürseniz bile tüm tarayıcılarda oynatılamaz.

HTML5 <audio> unsuru kullanın

<audio> unsuru bir HTML5 unsuru, HTML 4'te yasaktır, ancak tüm tarayıcılarda geçerlidir.

Örnek

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Tarayıcınız bu audio formatını desteklemiyor.
</audio>

Kişisel olarak deneyin

Yukarıdaki örnek bir mp3 dosyasını kullanır, bu yüzden Internet Explorer, Chrome ve Safari'de geçerlidir.

Bu sesin Firefox ve Opera'da da geçerli olmasını sağlamak için bir ogg türü dosyası eklendi. Başarısız olursa hata mesajı görüntülenir.

Soru:

  • <audio> etiketi HTML 4'te geçersizdir. Sayfanız HTML 4 doğrulamasını geçemez.
  • Sizin音频文件必须转换为不同的格式。
  • <audio> unsuru eski tarayıcılarda çalışmaz.

Açıklama:<!DOCTYPE html> (HTML5) ile doğrulama sorunlarını çözmek için kullanın.

En iyi HTML çözümü

Örnek

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Kişisel olarak deneyin

Yukarıdaki örnek iki farklı audio formatta kullanılmıştır. HTML5 <audio> elementi mp3 veya ogg olarak audioyu oynatmaya çalışır. Başarılı olamazsa, kod <embed> elementine geri döner.

Soru:

  • Audioyu farklı bir formata dönüştürmeniz gerekmektedir.
  • <audio> elementi HTML 4 ve XHTML doğrulamasını geçemez.
  • <embed> elementi HTML 4 ve XHTML doğrulamasını geçemez.
  • <embed> elementi hata mesajlarını göstermek için geri dönmeyebilir.

Açıklama:<!DOCTYPE html> (HTML5) ile doğrulama sorunlarını çözmek için kullanın.

Web sitesine audio eklemenin en basit yolu

Web sayfasına audio eklemenin en basit yolu nedir?

Yahoo'nun medya oynatıcısı kesinlikle bunlardan biri sayılır.

Yahoo Media Player kullanmak farklı bir yoldur. Sadece Yahoo'nun şarkı oynatma işini yapmasını sağlamanız yeterlidir.

MP3 ve diğer bir dizi formatı oynatabilir. Basit bir satır koduyla web sayfanıza ekleyebilir ve HTML sayfanızı kolayca profesyonel bir oynatma listesine dönüştürebilirsiniz.

Yahoo Media Player

Örnek

<a href="song.mp3">Ses Oynat</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

Kişisel olarak deneyin

Yahoo Oynatıcıyı kullanmak ücretsizdir. Onu kullanmak için, bu JavaScript'i web sayfasının altına eklemeniz gerekecek:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Sonra MP3 dosya bağlantısını HTML'nize kolayca ekleyin, her şarkı için otomatik olarak oynatma düğmesi oluşturur JavaScript:

<a href="song1.mp3">Şarkı 1 Oynat</a>
<a href="song2.mp3">Şarkı 2 Oynat</a>
...
...
...

Yahoo Media Player, kullanıcılarınıza sunar olan küçük bir oynatma düğmesi, tam oynatıcı değil. Ancak, düğmeye tıkladığınızda, tam oynatıcı açılır.

Bu oynatıcı her zaman pencere çerçevesinin altında yerleştirilir. Sadece tıklayarak onu kaydırabilirsiniz.

Bağlantıları kullanarak

Web sayfası medya dosyasına yönlendiren bağlantılar içeriyorsa, çoğu tarayıcı dosyayı oynatmak için "yardımcı uygulama" kullanır.

Aşağıdaki kod parçası, mp3 dosyasına yönlendiren bir bağlantı gösterir. Kullanıcı bu bağlantıya tıkladığında, tarayıcı dosyayı oynatmak için "yardımcı uygulama" başlatır:

Örnek

<a href="song.mp3">Sesi çal</a>

Kişisel olarak deneyin

İç içe ses

Web sayfanızda ses içerir veya web sayfasının bir parçası olarak varsa, bu durum iç içe ses olarak adlandırılır.

Web uygulamasında iç içe ses kullanmayı planlıyorsanız, birçok insanın iç içe sesin rahatsız edici olduğunu fark etmelisiniz. Ayrıca, kullanıcıların tarayıcılarındaki iç içe ses seçeneklerini kapattığını göz önünde bulundurun.

En iyi önerimiz, kullanıcıların iç içe ses istediği yerlerde bunları içermektir. Olumlu bir örnek, kullanıcıların kayıt dinlemek için bir bağlantıya tıkladığında, sayfa açılır ve kayıt çalınır.

HTML 4.01 Çoklu Medya Etiketleri

Etiket Açıklama
<applet> Önerilmez. Gömülü applet tanımlar.
<embed> HTML4'te önerilmez, HTML5'te izin verilir. Gömülü nesneyi tanımlar.
<object> Gömülü nesneyi tanımlar.
<param> Nesnenin parametrelerini tanımlar.

HTML 5 Çoklu Medya Etiketleri

Etiket Açıklama
<audio> Ses, örneğin müzik veya diğer ses akışları gibi sesleri tanımlar.
<embed> Etiketler, örneğin eklentileri gibi gömülü içerikleri tanımlar.