Last active
June 7, 2019 07:28
-
-
Save CannoHarito/4fd22f6562d11170be5fc22753db3db9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Web Speech API Test</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <h1>じゃんけん</h1> | |
| <p class="state">state</p> | |
| <p><button class="start">start</button></p> | |
| <p class="hints"></p> | |
| <div> | |
| <p class="output"><em>...diagnostic messages</em></p> | |
| </div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @returns {Element} */ | |
| const $ = (selector) => document.querySelector(selector); | |
| document.addEventListener('DOMContentLoaded', _ => { | |
| window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; | |
| window.SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList; | |
| if (!window.SpeechRecognition) { | |
| setState('SpeechRecognition is not available'); | |
| return; | |
| } | |
| if (!window.SpeechGrammarList) { | |
| setState('SpeechGrammarList is not available'); | |
| return; | |
| } | |
| const sr = new window.SpeechRecognition(); | |
| sr.lang = 'ja-JP' | |
| sr.addEventListener('error', (event) => { | |
| setState(event.message || String(event.error)); | |
| sr.abort(); | |
| }); | |
| sr.addEventListener('result', (event) => { | |
| console.dir(event.results) | |
| const text = event.results[0][0].transcript; | |
| setOutput(text); | |
| }); | |
| sr.addEventListener('audiostart', _ => setState('Listening...')); | |
| sr.addEventListener('soundstart', _ => setState('Recognizing...')); | |
| sr.addEventListener('nomatch', _ => setState('No match.')); | |
| sr.addEventListener('soundend', _ => setState('End.')); | |
| const hands = ['グー', 'チョキ', 'パー']; | |
| const grammar = | |
| `# JSGF V1.0 UTF-8 ja; | |
| grammar hands; | |
| public <hand> = ${hands.join(' | ')} ; | |
| `; | |
| $('.hints').innerHTML = hands.map(hand => '<span>' + hand + '</span>').join(''); | |
| const sgl = new window.SpeechGrammarList(); | |
| sgl.addFromString(grammar, 1); | |
| sr.grammars = sgl; | |
| $('button.start').addEventListener('click', _ => sr.start()); | |
| }); | |
| const setOutput = (message) => { | |
| $('.output').textContent = message; | |
| }; | |
| const setState = (message) => { | |
| $('.state').textContent = message; | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body, html { | |
| margin: 0; | |
| } | |
| html { | |
| height: 100%; | |
| } | |
| body { | |
| height: inherit; | |
| overflow: hidden; | |
| } | |
| h1, p { | |
| font-family: sans-serif; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| div { | |
| height: 100px; | |
| overflow: auto; | |
| position: absolute; | |
| bottom: 0px; | |
| right: 0; | |
| left: 0; | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| ul { | |
| margin: 0; | |
| } | |
| .hints span { | |
| text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7); | |
| padding: 0 5px; | |
| } | |
| button { | |
| font-size: 150%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
SpeechGrammarListはja-JPでは無視されているような気がする。