HTML Ses

HTML'de ses oynatmanın birçok yolu var.

Sorun, sorun ve çözüm

HTML'de ses oynatmak kolay değil!

Tüm tarayıcılar (Internet Explorer, Chrome, Firefox, Safari, Opera) ve tüm cihazlar (PC, Mac, iPad, iPhone) üzerinde ses dosyanızın oynatılmasını sağlamak için birçok teknik bilmelisiniz.

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

Eklentileri kullanın

Tarayıcı eklentileri, tarayıcı standartlarını genişleten küçük bilgisayar programlarıdır.

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

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

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

<embed> elementini kullanın

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

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

实例

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

亲自试一试

Soru:

  • <embed> etiketi HTML 4'te geçersizdir. Sayfa HTML 4 doğrulamasını geçemez.
  • Farklı tarayıcılar ses formatlarını farklı şekilde destekler.
  • Tarayıcı bu dosya formatını desteklemiyorsa ve eklenti yoksa bu ses oynatılamaz.
  • Kullanıcının bilgisayarında eklenti kurulu değilse ses oynatılamaz.
  • Bu dosyayı başka bir formata 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> elementini kullanın

<object tag> etiketi de dışarıdan (HTML olmayan) içeriğin konteynerini tanımlayabilir.

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

实例

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

亲自试一试

Soru:

  • Farklı tarayıcılar ses formatlarını farklı şekilde destekler.
  • Tarayıcı bu dosya formatını desteklemiyorsa ve eklenti yoksa bu ses oynatılamaz.
  • Kullanıcının bilgisayarında eklenti kurulu değilse ses oynatılamaz.
  • Bu dosyayı başka bir formata dönüştürseniz bile tüm tarayıcılarda oynatılamaz.

HTML5 <audio> elementini kullanın

<audio> elementi bir HTML5 elementidir, HTML 4'te yasaktır, ancak tüm tarayıcılarda etkilidır.

实例

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

亲自试一试

Yukarıdaki örnek bir mp3 dosyasını kullanmıştır, bu yüzden Internet Explorer, Chrome ve Safari'da etkili olmuştur.

Bu ses dosyasının Firefox ve Opera'da da etkili olabilmesi 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 dosyanızı farklı bir formata dönüştürmeniz gerekiyor.
  • <audio> elementi 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ü

实例

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

亲自试一试

Yukarıdaki örnek iki farklı audio formatını kullanır. HTML5 <audio> ögesi mp3 veya ogg olarak audioyu oynatmaya çalışır. Başarılı olamazsa, kod <embed> ögesine geri döner.

Soru:

  • Audio'yu farklı bir formata dönüştürmeniz gerekmektedir.
  • <audio> ögesi HTML 4 ve XHTML doğrulamasını geçemez.
  • <embed> ögesi HTML 4 ve XHTML doğrulamasını geçemez.
  • <embed> ögesi 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 sayfasına音频添加的最简单方法是什么？

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 bir dizi diğer 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

实例

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

亲自试一试

Yahoo Oynatıcıyı kullanmak ücretsizdir. 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, JavaScript her şarkı için otomatik olarak oynatma düğmesi oluşturur:

<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 küçük bir oynatma düğmesi, tam oynatıcı değil. Ancak, düğmeye tıkladığınızda, tam oynatıcı açılır.

请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”来播放该文件：

实例

Play the sound

亲自试一试

内联的声音

当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。

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

En iyi önerimiz, kullanıcıların içe aktarılan sesleri dinlemek istediği yerlerde bunları içermektir. Olumlu bir örnek, kullanıcıların bir kaydı dinlemek ve bir bağlantıya tıklamak zorunda olduğu bir sayfada, sayfa açıldıktan sonra kaydın oynatılmasıdır.

HTML 4.01 Çokluortam Etiketleri

Etiket Tanım
<applet> Önerilmez. İçe aktarılan applet'i tanımlar.
<embed> HTML4'te önerilmez, HTML5'te izin verilir. İçe aktarılan nesneyi tanımlar.
<object> İçe aktarılan nesneyi tanımlar.
<param> Nesnenin parametrelerini tanımlar.

HTML 5 Çokluortam Etiketleri

Etiket Tanım
<audio> Ses, örneğin müzik veya diğer audio akışları gibi sesleri tanımlar.
<embed> Etiketler, örneğin eklentileri gibi içe aktarılan içerikleri tanımlar.