HTML5, web sayfalarınıza öğe ile ses ve müzik eklemenizi kolaylaştırır. Aslında, yapılacak en zor şey, ses dosyalarınızın en geniş tarayıcı türünde çalındığından emin olmak için ihtiyacınız olan çoklu kaynakları oluşturmaktır.
HTML5 kullanmanın yararı, sadece birkaç etiket kullanarak ses yerleştirebilmenizdir. Tarayıcılar, daha sonra, bir IMG elemanı kullandığınızda bir görüntüyü gösterecekleri gibi sesi çalar.
HTML5 Web Sayfasına Ses Ekleme
Bir HTML Editörüne , bir ses dosyasına (tercihen MP3 formatında) ve bir ses dosyası dönüştürücüsüne ihtiyacınız olacaktır.
- Öncelikle bir ses dosyasına ihtiyacınız var. Dosyayı bir MP3 ( .mp3 ) olarak kaydetmek en iyisidir, çünkü bu yüksek ses kalitesine sahiptir ve çoğu tarayıcı tarafından desteklenir (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ ve Safari 5+).
- Firefox 3.6+ ve Opera 10.5+ desteği eklemek için dosyanızı Vorbis biçimine ( .ogg ) dönüştürün. Vorbis.com'da bulunan bir dönüştürücü kullanabilirsiniz. Ayrıca Firefox ve Opera desteği almak için MP3'lerinizi bir WAV dosya formatına ( .wav ) dönüştürebilirsiniz. Dosyalarınızı yalnızca güvenlik için her üç tipte göndermenizi öneririm, ancak ihtiyacınız olan en fazla şey MP3 ve diğeridir.
- Tüm ses dosyalarını web sunucunuza yükleyin ve sakladığınız dizini not edin. Çoğu tasarımcının bir resim dizinindeki görüntüleri kaydettiği gibi, ses dosyaları için bir alt dizine yerleştirmek iyi bir fikirdir.
- AUDIO öğesini, ses dosyası denetimlerinin görüntülenmesini istediğiniz HTML dosyanıza ekleyin.
- AUDIO öğesinin içine yüklediğiniz her ses dosyası için SOURCE öğelerini yerleştirin:
-
- AUDIO öğesindeki herhangi bir HTML, AUDIO öğesini desteklemeyen tarayıcılar için bir geri dönüş olarak kullanılacaktır. Yani biraz HTML ekleyin. En kolay yol, dosyayı indirmelerine izin vermek için HTML eklemektir, ancak sesi yürütmek için HTML 4.01 gömme yöntemlerini de kullanabilirsiniz. İşte basit bir geri dönüş:
Tarayıcınız ses çalmayı desteklemiyor, dosyayı indiriyor:
- Yapmanız gereken en son şey, AUDIO öğenizi kapatmaktır:
- İşiniz bittiğinde, HTML'niz şöyle görünmelidir:
Ek ipuçları
- HTML5'inizi doğrulayabilmesi için HTML5 doctype () yöntemini kullandığınızdan emin olun.
- Öğenize ekleyebileceğiniz diğer seçenekleri görmek için öğe için kullanılabilen özellikleri gözden geçirin.
- HTML'yi varsayılan olarak kontrolleri içerecek şekilde ayarladık ve otomatik oynatmanın kapalı olduğunu unutmayın. Tabii ki bunu değiştirebilirsin, ama çoğu insanın otomatik olarak başlayan sesleri / en iyi şekilde sinir bozucu olamayacağını kontrol edebileceklerini ve çoğu zaman bu durumdan sonra sayfayı terkedeceğini hatırlıyorum.