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)

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

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

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.

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.

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

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.

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

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.

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.

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?