html5 dersleri – Tayfun Erbilen

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

Etiket: html5 dersleri

Sıfırdan HTML Dersleri [Videolu]

HTML5 Audio (Ses Özelliği)