A repository where you can find information about many JavaScript and HTML5 APIs.

  • By Aurelio De Rosa
  • Last update: Dec 8, 2022
  • Comments: 11

HTML5 API demos

HTML5 API demos is a repository where you can find information about many JavaScript and HTML5 APIs.

For every API listed in this repository you'll find a link to the specifications, an article I've written on the subject, a link to CanIUse to discover what browsers support it, and to a demo I've developed as a complement for the articles. The demos are particularly valuable because they allow you to play with the these JavaScript and HTML5 APIs.

In this repository you can learn about the following APIs, listed in alphabetic order:

API Specifications Article Support Live demo
Ambient Light API Specifications Article Support Live demo
Battery Status API Specifications Article Support Live demo
classList API Specifications Article Support Live demo
Dataset API Specifications Article Support Live demo
Device Orientation API Specifications Article Support Live demo
Geolocation API Specifications Article Support Live demo
getUserMedia API Specifications Article Support Live demo
High Resolution Time API Specifications Article Support Live demo
Navigation Timing API Specifications Article Support Live demo
Network Information API Specifications Article Live demo
Page Visibility API Specifications Article Support Live demo
Proximity API Specifications Article Support Live demo
Resource Timing API Specifications Article Support Live demo
Speech Synthesis API Specifications Article Support Live demo
Screen Orientation API Specifications Article Support Live demo
User Timing API Specifications Article Support Live demo
Vibration API Specifications Article Support Live demo
Web Notification API Specifications Article Support Live demo
Web Speech API Specifications Article Support Live demo

Note

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).

License

HTML5 API demos is licensed under the CC BY-NC 4.0 ("Creative Commons Attribution NonCommercial 4.0")

Author

Aurelio De Rosa (Twitter: @AurelioDeRosa)

Github

https://github.com/AurelioDeRosa/HTML5-API-demos

Comments(11)

  • 1

    SpeechSynthesisVoice bug

    Per the latest spec, https://dvcs.w3.org/hg/speech-api/raw-file/tip/webspeechapi.html#speechsynthesisvoice, the following is expected to throw a TypeError:

    utterance.voice = selectedVoice.getAttribute('data-voice-uri');

       [Constructor,
        Constructor(DOMString text)]
        interface SpeechSynthesisUtterance : EventTarget {
            attribute DOMString text;
            attribute DOMString lang;
            attribute SpeechSynthesisVoice voice;
            attribute float volume;
            attribute float rate;
            attribute float pitch;
    
            attribute EventHandler onstart;
            attribute EventHandler onend;
            attribute EventHandler onerror;
            attribute EventHandler onpause;
            attribute EventHandler onresume;
            attribute EventHandler onmark;
            attribute EventHandler onboundary;
        };
    

    See how the voice attribute isn't a DOMString but: attribute SpeechSynthesisVoice voice;

    To fix this you could just pass in the index of the selected <option> into the SpeechSynthesisVoiceList returned by var voicesAvailable = speechSynthesis.getVoices();

    (I don't know if this site is even maintained, but thought I should document this)

  • 2

    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

  • 3

    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 gh-pages.

    Now it will be viewable as http://aurelioderosa.github.io/HTML5-API-demos

  • 4

    Anchors updated.

    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.

  • 5

    lang issue on web speech api

    Hello!

    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.

  • 6

    Api not supported

    Hi,

    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

  • 7

    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.

  • 8

    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.getUserMedia Error:(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

  • 9

    LightSensor

    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.

  • 10

    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.

    • If you start out holding your phone flat with the screen facing up, and then tilt the bottom of the screen downwards, the cube's top face rotates away from you, as if the cube were staying still behind the phone and you moved the camera down to look at it from the side. This is cool. But if instead you move the left or right side of the phone downward, then the cube spins in the wrong direction.
    • If you hold your phone with the screen vertical, then the cube is extremely sensitive to motion and spins unpredictably. (This problem originally made me think that my phone's sensors didn't work in the vertical position, and made me stop considering using the device orientation API until I later saw a different demo without this issue.)
    • If you hold your phone flat with the screen facing up and rotate your phone on the Z axis (so that the screen stays facing up), the cube appears as if it's staying still behind your rotating phone. This is way cool. But if you hold your phone at any other angle, and then rotate your phone similarly, the cube rotates unpredictably instead of appearing as if it's staying still behind the phone.

    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.

  • 11

    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?