10年以上前

デバイスのバイブレーション機能を実装できる「Vibration API」

着信やアラームなどでよく使われているバイブレーション機能は、JavaScriptでも実装することが出来ます。ただし、ユーザーがバイブレーション機能をONにしていることが前提条件となりますので注意してください。

バイブレーション機能を実装しよう

以下のコードは1秒間のバイブレーションを実行しています。navigator.vibrate(実行時間)でバイブレーションが発火します。

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>1秒間のバイブレーションサンプル</title>

<h1>1秒間のバイブレーション</h1>

<script>
navigator.vibrate(1000);
</script>

タップしたらバイブレーションさせよう

イベントを設定することで用途の幅が広がります。以下のコードは、ディスプレイをタップしたら1.5秒間のバイブレーションを実行します。

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>タップするとバイブレーションを実行するサンプル</title>

<h1 id="tap">ここをタップすると1.5秒間バイブレーションします</h1>
<script>
document.getElementById('tap').addEventListener('touchstart', function(){
  navigator.vibrate(1500);
});
</script>

337拍子バイブレーション

navigator.vibrate([配列])とすることで、パターンバイブレーションを実装できます。
これを利用して、337拍子バイブレーションを作ってみました。

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>337拍子のバイブレーションサンプル</title>

<h1>337拍子のバイブレーションサンプル</h1>
<p>デバイスのバイブ設定をONにしてください。

<script>
navigator.vibrate([200,150,200,150,200,500,200,150,200,150,200,500,200,150,200,150,200,150,200,150,200,150,200,150,200]);
</script>

参考

・Vibration API - W3C
・対応状況 - Can I use...

執筆者

AnTytle

他の記事

オススメ