HTML5 API demos
In this repository you can learn about the following APIs, listed in alphabetic order:
While the repository is called "HTML5 API demos", many of these APIs aren't part of the HTML5 specifications. So, technically speaking, many of them aren't HTML5 APIs. However, at the time I started this repository, I found the name to be useful as an umbrella to group them all and to... well, attract users (you know, SEO and the like).
HTML5 API demos is licensed under the CC BY-NC 4.0 ("Creative Commons Attribution NonCommercial 4.0")
Aurelio De Rosa (Twitter: @AurelioDeRosa)
Per the latest spec, https://dvcs.w3.org/hg/speech-api/raw-file/tip/webspeechapi.html#speechsynthesisvoice, the following is expected to throw a
utterance.voice = selectedVoice.getAttribute('data-voice-uri');
See how the
voiceattribute isn't a
attribute SpeechSynthesisVoice voice;
To fix this you could just pass in the index of the selected
var voicesAvailable = speechSynthesis.getVoices();
(I don't know if this site is even maintained, but thought I should document this)
Doubt regarding page visibillity api
Hi, Isn't the function of page visibillity similiar to window.onblur. The only difference I could see was that for onblur to trigger the page needs to be clicked and then it's focus must be lost but in page visibillity the page simply needs to come out of view without being active. are there any other differences ? Thanks Saikat
Please consider a gh-pages branch for github hosting.
You can host this using gh-pages. create an index file (feel free to steal mine: https://github.com/esteinborn/HTML5-API-demos) in the master branch.
Then create a new branch, as a clone of master, call it
Now it will be viewable as http://aurelioderosa.github.io/HTML5-API-demos
I've updated the references of the anchors on the demos to use HTTPS. I tested the links and they all worked over HTTPS. I updated the web notification API demo to the current favicon being served on the linked site - "favicon.ico" - did not exist.
lang issue on web speech api
The demo at https://www.audero.it/demo/speech-synthesis-api-demo.html is not working, every languaje sound always as english (on google chrome last version), i also try the web speech api (with your examples on sitepoint.com) and the lang atribute is not working.
Api not supported
I'm really interested in this project, but as for the 29/03/2014, on Google Chrome 33.0.1750.152, I get an error that states:
API not supported.
There are no problems on FireFox
Update the Screen Orientation API demo
Chrome for Android 38 and Opera for Android 25 support the Screen Orientation API but their implementation adheres to the Editor's Draft and not the Working Draft (unlike Firefox up to version 33 and Internet Explorer 11). So, the current demo doesn't work when using these browsers.
Update the getUserMedia API article and Demo
When I try to run the demo on the provided link I get some errors and warnings on the console when I click Play Demo button.
On clicking Play Demo Button: Warning:(line no. 82 getusermedia-api-demo.html)
navigator.mozGetUserMedia has been replaced by navigator.mediaDevices.getUserMediaError:(line no. 89 getusermedia-api-demo.html)
TypeError: URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.
On clicking Stop Demo Button: Error:(line no. 100 getusermedia-api-demo.html)
TypeError: videoStream.stop is not a function
How do I use the sensor on my mac.
I mean how do I use this example in a local server environment. I want a video to play when the sensor senses enough light.
Your example is the closest comprehensive example I found. But when I run it in a virtual environment it doesn't seem te work.
If you could help me out even if this is not a real issue for this git, it would be majorly appreciated.
Fix cube rotation in Device Orientation API demo
In the Device Orientation API demo, there are a few problems with how the cube on the page rotates, which can make the user think the device orientation API (or your phone sensors) is broken or extremely limited. This PR fixes the issues, making the cube's rotation much more intuitive and better showing off the power of the device orientation API.
This PR fixes these issues. I applied the tips from https://dev.opera.com/articles/w3c-device-orientation-usage/ to correct the cube rotation. It does add a chunk of matrix math code to an otherwise simple demo page implementation, but I think it's really worth it.
Here's a link to the to improved demo so you can try it easily: https://macil.github.io/HTML5-API-demos/demos/device-orientation-api-demo.html
This PR also adds an .editorconfig file to let developers have their indent settings be autoconfigured while working on files in this project, and changes the cube to be less transparent (I found I very often accidentally mixed up the front and back faces of the cube which made it very confusing). These are in different commits to make them easy to drop if you don't want them.
Web Speech api
I have trued to run the code for voice recognition with web speech api but the results are not showing in the text area. I changed the text area to a text box and it is still the same. How can I get it to display the results in a text box?