HTML5 Audio (Ses Özelliği) - 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";