This article was inspired by the talk of friends in the Corner Programmer group about fake download links that lead to ad links.
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 .
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.
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
How to use HTML5 Vibration API
HTML5 Vibration API provides functions
vibrate()for creating vibrations. The syntax is like this:
polacan fill the parameter value with the value of the vibration length.
For example we want to make vibrations for
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 ms. After that it vibrates again for as long as
To stop vibration, we can give a value of zero (
0) to the function
Okay understand! Enough of the theory.
Let's experiment ...
Please create a new HTML file, and save it in the directory
/var/www/html. Then fill in this code:
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).
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
I 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.
Try clicking the button!
The Live Demo can be checked at this link: https://goo.gl/8SPWt8 or scan the following QR Code:
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:
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.
- Mozilla Developer Network - Vibration API
- W3.org - Vibration API (Second Edition)
0 Komentar untuk "Get to know HTML5 Vibration API for Making Vibration on HP"
Silahkan berkomentar sesuai artikel