Blog for Learning

| lesson material | material summary | questions and answers | definitions | types and examples | other information | materi pelajaran | ringkasan materi | pertanyaan dan jawaban | definisi | jenis-jenis dan contoh-contoh | informasi lainnya |

Powered by Blogger.


Get to know HTML5 Vibration API for Making Vibration on HP

HTML5 Vibration API
This article was inspired by the talk of friends in the Corner Programmer group about fake download links that lead to ad links.
Vibration discussion on the web
Some web pages use vibrations to draw attention from visitors, especially web pages that are full of advertisements.
Reading their comments made me teratrik want to know how to make vibrations on the web.
Immediately I go to Google and enter the keyword "js vibrate phone" and the results are using HTML5 Vibration API .
Googling about the HTML5 vibration API

What is HTML5 Vibration API?

HTML5 Vibration API is an API (Application Programming Interface) to create vibrations on the web that aim to provide feedback on certain events.
According to the explanation of MDN (Mozilla Developer Network) the vibration itself is defined as a pattern of on-off pulse waves that have an integer length The wavelength determines the duration of the vibration.
Example of Getearan Pulse Wave
In the example of the pulse wave above, vibration will start (on) for 200 ms(milliseconds). After that stay still for 250 ms, then continue for 1000 msor 1seconds.

How to use HTML5 Vibration API

HTML5 Vibration API provides functions vibrate()for creating vibrations. The syntax is like this:
We polacan fill the parameter value with the value of the vibration length.
For example we want to make vibrations for 1seconds:
Then how about making more than one vibration?
We just have to make a pattern from the vibration pulse.
window.navigator.vibrate([1000, 500, 1000]);
This means that the wave will start for 1000 ms(1 second), then stop for 500 msAfter that it vibrates again for as long as 1000 ms.
To stop vibration, we can give a value of zero ( 0) to the function vibrate().
Okay understand! Enough of the theory.

Let's experiment ...

Please create a new HTML file, and save it in the directory htdocsor /var/www/htmlThen fill in this code:
<!DOCTYPE html>
    <title>Tutorial HTML5 Vibration API</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript">
        // fungsi ini akan kita panggil saat tombol diklik
        function buatGetaran(pola){
            var getaran = window.navigator.vibrate(pola);

            // tampilkan hasilnya ke console
            // kalau true berarti browser mendukung untuk membuat getaran
            // tapi kalau false browser tidak mendukung
    <p>Coba klik tombol berikut:</p>
    <button onclick="buatGetaran(1000)">Bergetar!!!</button>

    <button onclick="buatGetaran([1000, 500, 1000])">Bergetar 2x!!!</button>

    <button onclick="buatGetaran([200, 500, 300, 100, 400])">Bergetar 3x!!!</button>
Why do you have to save it in htdocs, isn't there PHP?
Because later, we can try via cellphone.

Experiment in the Desktop browser

Before trying on HP, we try first in a desktop browser (using google chrome).
Don't forget while opening the javascript console in the inspect element .
Experiment results of vibration output
The result true, means that our browser supports creating vibrations.
But how come there is no vibration?
Yes, yes, the computer hardware or laptop does not support it.😄

Experiment on Mobile

tried tethering WiFi from the HP to the Laptop, or vice versa.
Laptop as a web server, and HP as a client or web visitor. That means we have to know the IP of the laptop, then we open through the browser.
Vibration Experiment on HP
Try clicking the button!
The Live Demo can be checked at this link: or scan the following QR Code:
QR Code Live Demo
Is there a vibration or not?
If not, it means the browser doesn't support. Try using the latest version of Google Chrome.
Following is a list of browser versions that support:
List of browser versions that support vibration

Next Experiment Idea

  • Create vibrations if you fail to log in.
  • Integrate with GPS, such as making vibrations when in a certain location.
  • Create vibrations based on audio waves.
  • Apply in the game, for example, to vibrate during a collision in the game.
Any more ideas?
Add in comments!

The final word…

It's fun not to play HTML5 Vibration API ... 😄 Next, please do your own experiments that are more creative and cool.
Thank you for listening to this article to the end.
Reference :
0 Komentar untuk "Get to know HTML5 Vibration API for Making Vibration on HP"

Silahkan berkomentar sesuai artikel

Template By Kunci Dunia
Back To Top