Kategoriler
Genel

HTML5 İle Telefon Titreştirmek

HTML5 Vibration API ile, tarayıcı üzerinden telefonu istediğiniz aralıklarda titretebilirsiniz. Bu yazımda size API hakkında biraz bilgi vereceğim.  HTML5 tabanlı oyunlar yazıyorsanız kullanıcı etkileşimini arttırabilirsiniz.

DEMO

Kullanılan tarayıcının bu API yi destekleyip desteklemediğini öğrenmek için şu kodu kullanabiliriz,

navigator.vibrate = navigator.vibrate ||  navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

if (navigator.vibrate) {
  console.log('Tebrikler, destekliyor.');
} else {
  console.log('Üzgünüm, desteklemiyor.');
}

1000ms süreli 1 kez titreşim için,

window.navigator.vibrate(1000);
//ya da 
window.navigator.vibrate([1000]);

Farklı süreler kullanarak birden fazla kez titreştirmek için,

window.navigator.vibrate([1000, 2000, 3000]); // 1 saniye titret 2 saniye bekle sonra 3 saniye titret.

Telefonu titreterek Mors alfabesinde SOS(Yardım) çağrısı yapmak için (Kaynak 4),

window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]);

Titreşimi sonlandırmak içinse,

window.navigator.vibrate(0);
//ya da
window.navigator.vibrate([]);

kodlarını kullanabilirsiniz.

DEMO

Ne İşe Yarayacak?

Vibration API ile mobil web uygulamalarına biraz daha canlılık katabiliriz. Oyun oynarken, sohbet ederken  ya da bir bildirim gönderirken kullanıcıya titreşim yollayarak ilgisini çekebiliriz. Tabi titreşimin açık olması gerektiğini unutmamak gerek 😀

Tarayıcı Desteği

Demoyu Android 4.2.2 üzerinde Chrome 40 sürümünde ve Firefox’un son sürümünde test ettim ve çalıştı. Varsayılan Android tarayıcısında api çalışmadı (4.2.2 olduğundan dolayı). Web tarayıcıları da destekliyor görünse bile bilgisayarların titreşim özelliği olmadığından bunu test edemeyeceksiniz. Windows işletim sistemine sahip tabletler için durumun ne olduğunu açıkçası bilmiyorum.

Caniuse’a göre  Vibration API desteği şu tarayıcılarda var;

  • Firefox 35+
  • Chrome 31+
  • Opera 27+
  • Varsayılan Android Tarayıcı ( 4.4 / Kitkat +)

Kaynaklar

Bir cevap yazın

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