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 :

• preload="none" : Taracıya ses dosyasının önceden yüklenmemesi gerektiğini söyler.
• preload="metadata" : Tarayıcıya, metnin uzunluğu veya formatını gibi meta verileri indirmesini söyler.
• preload="auto" : Kullanıcının kullanması beklenmese bile, tüm ses dosyasının indirilebileceğini gösterir.
• preload=" " : Boş dize, varsayılan değer preload="auto"

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:

HTML5 TARAYICILARIN DESTEKLEDİĞİ SES FORMATLARI

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.

<html>
<body>
    <audio id="audio" src="ney.mp3" controls autoplay>
    </audio>
    &lot;ul id="liste">
       <li data-src="ney.mp3">NEY</li>
       <li data-src="fon.mp3">Fon Müzik</li>
       <li data-src="fon2.mp3">Fon2 Müzik</li> 
    </ul>
   
    <script>
      var ses = document.getElementById("audio");
      var liste = document.querySelectorAll("#liste li");
      var index =liste.length;
     liste[0].style.color="blue";
     y=0;
      
 [].forEach.call(liste , function(el,i) {
       el.onclick=function(){
       	for(var j=0; j<=index-1; j++){
        liste[j].style.color="";
         } 
           el.style.color="blue";
          // liste[i-1].style.color="";
           var x= el.getAttribute("data-src");
           ses.src=x;
           y=i;
           }
       
         });
  
    ses.addEventListener("ended", function(){
    y++;
   
    if(index==y){
    y=0;
    liste[index-1].style.color="";
    }
    if(y==0){}else
    liste[y-1].style.color="";
    liste[y].style.color="blue";
    ad = liste[y].getAttribute("data-src");   
     ses.src=ad;
    
}); 
    </script>
</body>
</html>

<audio preload="none">