Get an idea of what's possible with current and future HTML(5) and JavasScript specifications.
You may try any feature that has a green border. But be aware: A lot of these features are not yet fully implemented, may behave differently on different browsers or not work at all.
If you have ideas of how to improve this collection, please feel free to open an issue or create a pull request on github.
Of course this is no complete feature list. For more lists of what can be done with HTML, CSS and JavaScrip please visit the following roundups:
After your approval some browsers might show you notifications above your task bar.
Yes, your phone might vibrate. Desktop browser might provide the API, but - surprise - won't vibrate.
Firefox and Chrome can detect your battery status. Try to plug your device in and out to see the changes.
Time until fully charged: n/a
Time until discharged: n/a
Chrome can do speech recognition inside the browser after the user has allowed to use the microphone.
Few browser are able to synthesize text to speech and read it out to you.
Some mobile devices can provide rotation data in all three axes through the browser. However, browser may handle the angles differently.
-
Measure your device acceleration in three axes. There even exist libraries to detect motion gestures like shaking by analysing this data.
Some mobile devices can provide rotation data through the browser. Put your device flat on a table and press start to see the compass in action. Some browsers may invert the rotation angles - this example uses angles like specified in the W3C Specification.
-
Display any HTML element in fullscreen mode.
Analyse frequencies and the waveform of microphone input or sound files.
Use the webcam of your device and analyse its images. The border around the video indicates the average color of the video.
Play sound using the Web MIDI API (W3C Draft).
With the WebAudio API you can create all sorts of sound effects on the fly, using oscillators, many filters and a lot more.
Let your browser tell you where you are an where you're heading.
This API can capture your mouse pointer like used in many video games. Press ESC to exit the capture mode.
image from Wikipedia by böhringer friedrichDrag things into this field. You can drag & drop files, text or html items. Different browsers may display different attributes and mime-types.
Detects if your device is connected to the internet. Some browsers may respont to their "work offline" menu items only.
Get information about the screen orientation (portrait/landscape) of your device. You can even lock the orientation (may need fullscreen access).
Use your device's light sensor to get information about the ambient light level.
Use your device's proximity sensor to get information about how far away the user currently is. Some browsers may not return a specific value but the information if anything is near or not.
Get realtime information about your type of network connection.
