HTML5 AUDİO(SES-MP3) PLAYER EKLEME

HTML5 <audio> etiketi, bir HTML belgesinde audio player elementi belirtmek için kullanılır. Örneğin, ziyaretçilerinizin müzik dinlemesi için web sayfanıza bir audio player yerleştirebilirsiniz.

HTML5'ten önce, ses dosyalarının web'de audio player ile oynatılabilmek için bir standart yoktu. Modern tarayıcılarda, sayfanıza audio player eklenmesi, resim ekleme kadar kolay. Artık özel eklentilerle (flash) uğraşmaya veya karmaşık kodlara ihtiyaç duymuyorsunuz, tek bir öğeyle bunu yapabilirsiniz.

Gerçekten audio player ekleme ne kadar basit olduğunu bir örnekle başlayalım:

ÖRNEK:

<audio controls>

  <source src="muzik.mp3" type="audio/mpeg">
 
 Tarayıcınız audio(ses) öğesini desteklemiyor.

</audio>

Yukarıda ki kodlar Sayfanıza basit bir audio player yerleştirmeniz ve bir kullanıcının medya aracını oynatabilmesi, duraklatması veya başka şekilde kontrol edebilmesi için temel denetimleri göstermeniz için tek ihtiyacınız olan kodlar budur.

HTML5 <audio> etiketi, ses playerin nasıl başlatacağını belirten nitelikleri kabul eder. Öznitelikleri olarak, controls , autoplay , loop ve daha fazlasını içerir. Desteklenen niteliklerin tam listesi için aşağıya bakınız.

Tarayacı destegi :

Tablodaki rakamlar, <audio> öğesini tam olarak destekleyen ilk tarayıcı sürümünü belirtir.




Element
<audio> 4.0 9.0 3.5 4.0 10.5

HTML <audio> Öğesi

HTML5'te audio player görüntülemek için yapmanız gereken şu kodları eklemek :

ÖRNEK:

<audio controls>

  <source src="ney.ogg" type="audio/ogg">
  
  <source src="ney.mp3" type="audio/mpeg">
  
   Tarayıcınız audio(ses) öğesini desteklemiyor.

</audio>
 

ÇIKTI:





Website hızını artırmak için, source özniteliğine her zaman type özniteliğini eklemeniz gerekir. Aksi halde, tarayıcının oynatabileceği ses dosyası bulana kadar tarayıcı her ses dosyasını yükler.

NOT : Yukarıda gördüğünüz üzere birden çok src (kaynak dosya) tanımlayabilirsiniz. <audio> Etiketi en modern tarayıcılar tarafından desteklenmektedir ancak sorun, farklı tarayıcıların aynı dosya biçimini desteklemiyor olmasıdır. İnternet Explorer .Wav uzantılı ses dosyalarını oynatamaz, ancak İnternet Explorer bunun yerine .mp3 dosyalarını oynatabilir. Bu sorunun çözümü her iki biçimi de kullanmaktır, bu nedenle ziyaretçilerin sesleri, tarayıcıları ne olursa olsun duyabiliyor.

AUDİO ÖZELLİKLER

<audio> öğesinin varsayılan davranışını değiştirebilecek veya geliştirebilen birkaç özel nitelik vardır.

src : Öğesini kullanarak birden fazla kaynak dosyası belirtebilirsiniz. Kaynak elemanı, kullanıcının tarayıcısından birinin desteklemediği durumlarda birden çok biçimi bir geri bildirim olarak belirtmenizi sağlar.

autoplay : Autoplay bu, tarayıcıya audio player oynatımını otomatik olarak başlatmasını söyler Mobil tarayıcıların genelde bu özelliği desteklemediğini, kullanıcının audio player oynatmaya başlamak için ekrana dokunması gerektiğini unutmayın. Websiteye gelen ziyaretçi yüksek sesli bir müzik ile karşılaşması, çok rahatsız edici olabileceğinden, bu özelliği dikkatli kullanın. (örnek kullanım: autoplay veya autoplay="autoplay" )

controls : Varsayılan audio denetimlerini gösterir oynat, duraklat, vb... (örnek kullanım: controls veya controls="controls" )

loop : Audio player oynatma Bitirdikten sonra müziğin tekrar oynatmaya devam edip etmeyeceğini belirtir. (örnek kullanım: loop veya loop="loop" )

muted : Audio playerin ses çıkışının varsayılan durumunu denetler. Varsa, bu öznitelik, yükleme üzerine ses çıkışının sessiz kalmasına (yani sesin olmamasına) neden olur. Bu özellik kullanıcıların tercihlerini geçersiz kılacaktır. Kullanıcı daha sonra istediği takdirde sesi açmayı seçebilir.

preload : Ses dosyasının açılan sayfada ön yüklemesinin yapılıp yapılmayacağı belirtir. webmaster, en iyi kullanıcı isteklerine neden olacağını düşündüğü şeyleri tarayıcıya bir ipucu vermesine olanak tanır. Bu özelliği kullanmak gerekli değildir, bazı tarayıcılar bu özelliği görmezden gelir.

Bu üç değerden birini alır :

Her durumda, tarayıcı bu özelliği bir komut değil bir ipucu olarak alır.

HTML Ses - Tarayıcı Desteği

HTML5' te, üç adet desteklenen ses biçimi vardır: MP3, Wav ve Ogg.

Farklı biçimler için tarayıcı desteği şu şekildedir:


Tarayıcı MP3 Wav Ogg
Internet Explorer VAR YOK YOK
Chrome VAR VAR VAR
Firefox VAR VAR VAR
Safari VAR VAR YOK
Opera VAR VAR VAR

HTML5 TARAYICILARIN DESTEKLEDİĞİ SES FORMATLARI



Dosya Formatı Audio Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

HTML5 Audio kontrol etmek için JavaScript'i kullanma


HTML5 <audio> nesnesini, JavaScript tarafından Audio playerın oynatmayı kontrol etmek için kullanabileceğiniz yöntemler, özellikler ve olaylar sağlar.

Web sayfanıza bir HTML5 audio player denetimi ekleme bölümünde açıklanan HTML5 audio öğesi, web sayfalarınızdaki Audio öğelerini kullanmaya başlamanıza izin verir. JavaScript'in eklenmesiyle, Javascript kodları kullanarak özel Audio oynatma denetimleri oluşturabilir, geçerli Audio süre ve ses seviyesini ayarlamanıza izin verir.

Hakan Daşkıran 20/08/2018

Abi, peki html ile mesela audio player yaptık peki stil olarak bunu nasıl degiştirebiliriz mesela ben muzik çalar uygualamasi yapacağım ama muzik çaların stili degiştireceğim bu nasıl mümkün acaba?

yönetici 20/08/2018

Hakan, HTML etiketlerle audio player yaparsan stil veremezsin, Tarayacıların belirlediği format geçerlidir. Kendin özel stil verilmiş yapacaksan javaScript, html ve css kullanarak yapabilirsin. HTML ARKAPLANA MÜZİK EKLEME bu linkte bir ölçüde yapılmıştır. javascript ile Audio nesnesi oluturacaksın HTML5 Progress Bar ve butonlar ekleyeceksin ve butonlara istediğin stil ve resimler ekleyerek özelleştirebilirsin.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5068

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.