X-webkit-speech does not work

 var msg = document.getElementById('msg'); if (document.createElement('input').webkitSpeech === undefined) { msg.innerHTML = "x-webkit-speech is <strong>not supported</strong> in your browser."; } else { msg.innerHTML = "x-webkit-speech is <strong>supported</strong> in your browser."; } 

 *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-family: Helvetica, Arial, sans-serif; font-size: 100%; background: #333; } #page-wrapper { width: 640px; background: #FFFFFF; padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); } h1 { margin-top: 0; } label { display: block; padding-bottom: 0.25em; } input { display: block; font-size: 1.2em; padding: 0.25em; width: 100%; margin-bottom: 1em; border-radius: 3px; border: 1px solid #BABABA; } button { display: inline-block; border-radius: 3px; border: none; font-size: 0.9rem; padding: 0.4rem 0.8em; background: #69c773; border-bottom: 1px solid #498b50; color: white; -webkit-font-smoothing: antialiased; font-weight: bold; margin: 0 0.25rem; text-align: center; } button:hover, button:focus { opacity: 0.75; cursor: pointer; } button:active { opacity: 1; box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset; } 

 <div id="page-wrapper"> <h1>Speech Input Demo / Tester</h1> <p id="msg"></p> <label for="text">Text</label> <input type="text" id="text" x-webkit-speech> <label for="number">Number</label> <input type="number" id="number" x-webkit-speech> <label for="email">Email</label> <input type="email" id="email" x-webkit-speech> <label for="url">URL</label> <input type="url" id="url" x-webkit-speech> <label for="tel">Telephone</label> <input type="tel" id="tel" x-webkit-speech> <label for="date">Date</label> <input type="date" id="date" x-webkit-speech> <label for="datetime">Date and Time</label> <input type="datetime" id="datetime" x-webkit-speech> <label for="month">Month</label> <input type="month" id="month" x-webkit-speech> </div>