HTML5 Audio (Ses Özelliği)

HTML5 ile birlikte sesler üzerindeki hakimiyetimiz arttı. Ses dosyasının bir çok event (olay) ını kontrol edebiliyoruz buna göre işlem yaptırabiliyoruz. Ben size bu yazıda (video daha sonra eklenecek) html5 de seslerle çalışmayı göstereceğiz..

Öncelikle bir ses dosyasını <audio> etiketi ile kullanıyoruz.

<audio controls>
  <source src="ses.mp3" type="audio/mpeg">
  Tarayıcınız bu özelliği desteklemiyor.
</audio>

HTML5 Audio ile Hangi Ses Formatlarını Oynatabiliyoruz?

Sadece Mp3, Wav ve Ogg formatlarını oynatabilirsiniz. Bunların her birinin mime tipi farklıdır. Kısaca göstereyim;

<!-- mp3 -->
<source src="ses.mp3" type="audio/mpeg">

<!-- wav -->
<source src="ses.wav" type="audio/wav">

<!-- ogg -->
<source src="ses.ogg" type="audio/ogg">

Otomatik Başlatma (autoplay)

Sesin otomatik başlaması için audio etiketine autoplay niteliği eklenir.

<audio controls autoplay>

Sürekli Olarak Çalması (loop)

Sesin bittikten sonra tekrar başlaması ve buna sürekli devam etmesi için audio etiketine loop niteliği eklenir.

<audio controls autoplay loop>

Sessida Çalması (muted)

Sesin sessizde çalması için audio etiketine muted niteliği eklenir.

<audio controls autoplay muted>

Ön yüklemeyi iptal etme (preload)

Sesin başlamadan önce ön yüklemesini iptal etmek için audio etiketine preload=”none” niteliği eklenir.

<audio controls autoplay preload="none">

Oynatma (play) ve Durdurma (pause) Özelliği

Artık biraz daha eğlenceli kısma geçelim. JavaScript ile (tabi biz jquery’i dahil ederek kullanacağız) oynatma ve durdurma işlemlerini yapalım. Öncelikle html yapımız şöyle olsun;

<audio controls>
  <source src="ses.mp3" type="audio/mpeg">
  Tarayıcınız bu özelliği desteklemiyor.
</audio>

<button id="play">Oynat</button> <button id="pause">Durdur</button>

Şimdi jquery’de click olaylarına ses dosyamızı durdurup oynatalım. Bunun için play() ve pause() metodlarını kullanacağız.

// html audio nesnesi
var audio = $('audio');

// oynatma olayı
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma olayı
$('#pause').on('click', function(e){
    audio[0].stop();
    e.preventDefault();
});


$('audio') sonuna [0] yazarak html ses elemanına çevirdim. Aksi halde bir jquery nesnesi olacaktı. Ancak ses metodları sadece ses elemanlarında çalışacağı için bunu yapmak zorundayız.

Oynatma Olayı

Ses dosyası oynarken bunu yakalamak istersek timeupdate event'ını kullanacağız. Örnek vermek gerekirse;

var audio = $('audio');
audio.bind('timeupdate', function(){
   console.log('ses oynatılıyor..');
});

ancak tabi bu şekilde bir anlamı yok. Bir alttaki örnek ile daha anlamlı olacaktır.

Toplam Süreyi (duration) ve Geçen Süreyi (currentTime) Hesaplamak

Ses dosyasının toplam süresini ve oynatırken ki mevcut süresini hesaplatmak için duration ve currentTime kullanılır.
Mevcut süresi yukarıdaki oynatma olayını kullanarak alacağız.

// saniyeyi çeviren fonksiyon
function readableDuration(seconds) {
    sec = Math.floor( seconds );    
    min = Math.floor( sec / 60 );
    min = min >= 10 ? min : '0' + min;    
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : '0' + sec;    
    return min + ':' + sec;
}

// html audio nesnesi
var audio = $('#audio');

// oynatma olayı
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma olayı
$('#pause').on('click', function(e){
    audio[0].pause();
    e.preventDefault();
});

// hazır olduğunda toplam süreyi yazdır
audio.bind('canplay', function(){
    var duration = audio[0].duration;
    $('.duration').text( readableDuration(duration) );
});

// değişiklik olduğunda mevcut süreyi yazdır
audio.bind('timeupdate', function(){
    var current = audio[0].currentTime;
    $('.current').text( readableDuration(current) );
});

Saniyeyi düzgün gösterebilmek için şuradaki fonksiyonu kullandık.
canplay eventı da ses dosyası hazır olduğunda çalışmakta. Bu yüzden toplam süreyi bu event içinde aldık yoksa sıkıntı büyük 🙂

Progress Bar

Kendimize özel bir progress bar yapmak istersek önce % değeri hesaplamalıyız. Sonra bu değeri progress bar'da göstermek çocuk oyuncağı 🙂
Bir değerin 100% ünü hesaplamak için formül şöyledir;

MEVCUT DEĞER / TOPLAM DEĞER * 100

Burada mevcut değer currentTime toplam değer duration olacağından bizim % dilimimizi bulduk bile 🙂 Hadi şimdi bunu kodlara dökelim.

// saniyeyi çeviren fonksiyon
function readableDuration(seconds) {
    sec = Math.floor( seconds );    
    min = Math.floor( sec / 60 );
    min = min >= 10 ? min : "0" + min;    
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : "0" + sec;    
    return min + ":" + sec;
}

// html audio nesnesi
var audio = $('#audio'),
    trackbar = $('.trackbar'),
    percent = $('.percent'),
    duration = 0;

// oynatma olayı
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma olayı
$('#pause').on('click', function(e){
    audio[0].pause();
    e.preventDefault();
});

// hazır olduğunda toplam süreyi yazdır
audio.bind('canplay', function(){
    duration = audio[0].duration;
    $('.duration').text( readableDuration(duration) );
});

// değişiklik olduğunda mevcut süreyi yazdır
audio.bind('timeupdate', function(){
    
    var current = audio[0].currentTime;
    $('.current').text( readableDuration(current) );
    
    // yüzdeyi hesapla
    var currentPercent = Math.ceil( (current / duration) * 100 );
    trackbar.width( currentPercent + '%' );

});

Ancak bu şekilde çok kullanışlı değil.. Progress bar a tıkladığımızda da tıklanan yerden çalmaya devam etmeli.. Bu yüzden kodlarımızda ufak değişiklikler yapalım ve bu sorunu da çözelim.

// saniyeyi çeviren fonksiyon
function readableDuration(seconds) {
    sec = Math.floor( seconds );    
    min = Math.floor( sec / 60 );
    min = min >= 10 ? min : '0' + min;    
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : '0' + sec;    
    return min + ':' + sec;
}

// html audio nesnesi
var audio = $('#audio'),
    progress = $('.progress'),
    trackbar = $('.trackbar'),
    percent = $('.percent'),
    duration = 0;

// oynatma olayı
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma olayı
$('#pause').on('click', function(e){
    audio[0].pause();
    e.preventDefault();
});

// hazır olduğunda toplam süreyi yazdır
audio.bind('canplay', function(){
    duration = audio[0].duration;
    $('.duration').text( readableDuration(duration) );
});

// değişiklik olduğunda mevcut süreyi yazdır
audio.bind('timeupdate', function(){
    
    var current = audio[0].currentTime;
    $('.current').text( readableDuration(current) );
    
    // yüzdeyi hesapla
    var currentPercent = Math.ceil( (current / duration) * 100 );
    trackbar.width( currentPercent + '%' );

});

progress.on('click', function(e){
    
    // farenin  x konumu
    var posX = $(this).offset().left;
    
    // progress barın toplam genişliği
    var totalWidth = $(this).width(),
    
        // farenin tıklanan nesneden x ekseninda uzaklığı (genişliği)
        currentWidth = e.pageX - posX;
    
    // tıklanan yere göre % değeri
    var clicked = (currentWidth / totalWidth) * 100;

    // bilinen % değerine göre zaman hesabı
    var resultSecond = duration * clicked / 100;

    trackbar.width(clicked + '%');
    audio[0].currentTime = resultSecond;
    
    audio[0].play();
    
});

Yükleneni Progressda Gösterme (buffered)

Bunun için progress eventını kullanacağız. Ve bu event içinde oynatmadan önce yüklenmiş ya da yüklenmekte olan değeri alacağız.

// saniyeyi çeviren fonksiyon
function readableDuration(seconds) {
    sec = Math.floor( seconds );    
    min = Math.floor( sec / 60 );
    min = min >= 10 ? min : '0' + min;    
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : '0' + sec;    
    return min + ':' + sec;
}

// html audio nesnesi
var audio = $('#audio'),
    progress = $('.progress'),
    trackbar = $('.trackbar'),
    percent = $('.percent'),
    buffered = $('.buffered'),
    duration = 0;

// oynatma olayı
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma olayı
$('#pause').on('click', function(e){
    audio[0].pause();
    e.preventDefault();
});

// hazır olduğunda toplam süreyi yazdır
audio.bind('canplay', function(){
    duration = audio[0].duration;
    $('.duration').text( readableDuration(duration) );
});

// değişiklik olduğunda mevcut süreyi yazdır
audio.bind('timeupdate', function(){
    
    var current = audio[0].currentTime;
    $('.current').text( readableDuration(current) );
    
    // yüzdeyi hesapla
    var currentPercent = Math.ceil( (current / duration) * 100 );
    trackbar.width( currentPercent + '%' );

});

progress.on('click', function(e){
    
    // farenin  x konumu
    var posX = $(this).offset().left;
    
    // progress barın toplam genişliği
    var totalWidth = $(this).width(),
    
        // farenin tıklanan nesneden x ekseninda uzaklığı (genişliği)
        currentWidth = e.pageX - posX;
    
    // tıklanan yere göre % değeri
    var clicked = (currentWidth / totalWidth) * 100;

    // bilinen % değerine göre zaman hesabı
    var resultSecond = duration * clicked / 100;

    trackbar.width(clicked + '%');
    audio[0].currentTime = resultSecond;
    
    audio[0].play();
    
});

audio.bind('progress', function(){
    try {
        var currentBuffered = audio[0].buffered.end(audio[0].buffered.length - 1) / duration * 100;
        buffered.width(currentBuffered + '%');
    } catch ( err ){
        // err
    }
});

Sesin Bittiğini Anlamak (ended)

Ses bittiğinde bunu yakalamak için ended eventını kullanıyoruz.

audio[0].addEventListener("ended", function() {
    alert("ses bitti!");
});

Diğer Bazı İşe Yarar Şeyler

var audio = $('#audio')[0];

// sesi kapatma
audio.muted = true;

// sesin ayarını oynama
audio.voluma = 0.2;

// sesin mevcut zamanını alma
audio.currentTime;

// sesion toplam zamanını alma
audio.duration;

// sesion zamanını ayarlama
audio.currentTime = 15; // 15. sn

// sesi otomatik oynatma
audio.autoplay = true;
audio.load();

// sesin kontrollerini açmak ya da gizlemek için
audio.controls = true;
audio.controls = false;

// sesion kaynak adresini almak için
audio.currentSrc;

// sesin durup durmadığını anlamak için
audio.paused;

// sesin oynayıp oynamadığını anlamak için
audio.played;

// ön yüklemeyi kapatma
audio.preload = "none";

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“HTML5 Audio (Ses Özelliği)” üzerine 21 yorum

  1. Video etiketi için olanını merakla bekliyorum 🙂
    Birde bunları videolu anlatıma geçtikten sonra tekrar anlatabilme ihtimalin var mı? Eğer olursa gerçekten şahane olur da 🙂

  2. Tayfun araştırdım ama bulamadım belki sen görmüşsündür bir yerde veya biliyorsundur: Müziği belli bir zamanda örneğin 10. saniyeden itibaren nasıl başlatabiliriz?

  3. Vallaha Allah razı olsun Türkiyede senden bir tane daha yok.Bu arada video etiketi için olanı sabırsızlıkla bekliyorum

  4. Allah senden razı olsun Tayfun hocam anlatımlarınız gerçekten harika aradıklarımı hep sizin anlatımlarınızda buluyorum çok teşekkürler

  5. birader eline sağlık çok iy olmuş da

    sen bunları nereden öğreniyorsun, kendi sitesinden mi yoksa okulda derslerini falan mı gösteriyorlar, bende internetten biçok şeyi bakıyorum anlıyorum üstüne katıyorum ama, bu olayda sanki sen bulmuşsun html5 audioyu, demek istediğim gerçekten nereden başlamak gerekiyor tam olarak

  6. ended eventi ile ilgili birşey sormak istiyorum, örneğinizde alert verdirmişsiniz.burda alert yerine şarkı bitince aynı kategoride belirlediğim diğer şarkının sayfasına gitme meselesini nasıl halledebilirim (belirleme kısmını php ile sayfa içinde hallettim ama o sayfaya nasıl yönlendirebilirim),anlatabildim derdimi umarım 🙁

    1. yönlendirme işlemi için şunu kullanabilirsin;

      window.location.href = "http://www.erbilen.net";

      tabi sen burada başka bir şarkı adresine yönlendireceksin 🙂 onu da php ile dinamik alırsın javascriptte şöyle bir değişkene atarsın;

      var sonraki = "< ?php echo $link; ?>";

      daha sonra javascriptte sonraki değişkenine yönlendirme yaparsın.

  7. Hocam Öncelikle Çok güzel bir paylaşım ellerine sağlık. Denedim gayet de güzel çalışıyor çok sağolasn.
    Benim şöyle bir porblemim var. Sayfa geçişlerinde müzik yeniden başlıyor. Ben sayfa geçişlerinde de müziğin aynı şekilde devam etmesini istiyorum. Yani her sayfa geçişinde baştan başlamasın. Bu sorunu nasıl çözebiliriz. Bu konuda bilgin varsa ve paylaşırsna çok sevinirim.

    İyi Çalışmalar…

  8. Yusuf Güner, kodları bir div içine alıp bu div’e display: inline-block; verin. Daha sonra bu divide başka bir div içine alıp text-align: center; deyip ortalayın. Ya da ilk divi aldıktan sonra belli bir genişlik verip margin: 0 auto; diyerek ortalayın.

  9. Merhaba hocam, öncelikle çok güzel ve akıcı bir anlatım olmuş. Benim sorum ise şu… Bir şarkı bitince diğerine otomatik geçme olayını bir türlü çözemedim. Yardımcı olursan çok sevinirim…

    1. Merhaba, temel olarak bir array oluşturabiliriz mp3 linkleri için;

      var mp3 = ["a.mp3","b.mp3","c.mp3"];

      Mantık olarak ilk 0. indekse sahip mp3’üm oynayacak. Ve şu şekilde sesin bittiğini yakalıyorduk;

      audio[0].addEventListener("ended", function() {
          // burada sonraki şarkıyı başlat
      });

      Sonraki şarkıyı bulmak içinde bir değişen oluştur, currentSong adında örneğin. İlk değeri 0 olacak. Sesin bittiğini yakaladığında da şu şekilde 2. şarkıyı bulabilirsin;

      var nextSong = mp3[currentSong + 1];

      Bu şekilde sonraki şarkının mp3 linkini alıp başlatabilirsin.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir