Skip to content
Snippets Groups Projects
Commit ad8fa023 authored by v4nkor's avatar v4nkor
Browse files

Big second commit

parent 9b7e7bb7
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 657 additions and 0 deletions
pages/voice.php 0 → 100644
+ 3
− 0
View file @ ad8fa023
<img class="icon" src="styles/images/icons/microphone.svg" style="width:16px;">
<button id="listenBtn">Commencer l'ecoute</button>
\ No newline at end of file
styles/images/icons/microphone.svg 0 → 100644
+ 1
− 0
View file @ ad8fa023
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z"/></svg>
\ No newline at end of file
web-speech-api/README.md 0 → 100644
+ 29
− 0
View file @ ad8fa023
# web-speech-api
Code for demos illustrating features of the Web Speech API. See [Web_Speech_API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) for more details.
> For the latest browser support, please have a look at the browser compatibility table here: [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#browser_compatibility) and [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API#browser_compatibility).
## Speech color changer demo
[Run recognition demo live](https://mdn.github.io/dom-examples/web-speech-api/speech-color-changer/)
Tap the screen then say a colour — the grammar string contains a large number of HTML keywords to choose from, although we've removed most of the multiple word colors to remove ambiguity. We did keep goldenrod, cos, well.
This current works only on Chrome/Chrome Mobile. To get this code running successfully, you'll need to run the code through a web server (localhost will work.)
## Phrase matcher demo
Speak the phrase and then see if the recognition engine successfully recognises it — this is another demo that relies on speech recognition, written for a research team at the University of Nebraska at Kearney.
This current works only on Chrome/Chrome Mobile. To get this code running successfully, you'll need to run the code through a web server (localhost will work.)
[Run phrase matcher demo live](https://mdn.github.io/dom-examples/web-speech-api/phrase-matcher/)
## Speak easy synthesis demo
[Run synthesis demo live](https://mdn.github.io/dom-examples/web-speech-api/speak-easy-synthesis/)
Type words in the input then submit the form to hear it spoken. You can also select the different voices available on the system, and alter the rate and pitch.
This currently works in Chrome, Firefox and Safari.
web-speech-api/index.html 0 → 100644
+ 39
− 0
View file @ ad8fa023
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>Web Speech API</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Pick your test</h1>
<ul>
<li><a href="phrase-matcher/index.html">Phrase matcher</a></li>
<li>
<a href="speak-easy-synthesis/index.html">Speak easy synthesis</a>
</li>
<li>
<a href="speech-color-changer/index.html">Speech color changer</a>
</li>
</ul>
<h2>More information</h2>
<ul>
<li>
<a
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API"
>Web Speech API</a
>
</li>
<li>
<a href="https://github.com/mdn/dom-examples/tree/main/web-speech-api"
>The code used on these pages.</a
>
</li>
</ul>
</body>
</html>
web-speech-api/phrase-matcher/index.html 0 → 100644
+ 27
− 0
View file @ ad8fa023
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>Phrase matcher</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Phrase matcher</h1>
<p>Press the button then say the phrase to test the recognition.</p>
<button>Start new test</button>
<div>
<p class="phrase">Phrase...</p>
<p class="result">Right or wrong?</p>
<p class="output">...diagnostic messages</p>
</div>
<script src="script.js"></script>
</body>
</html>
web-speech-api/phrase-matcher/script.js 0 → 100644
+ 124
− 0
View file @ ad8fa023
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
var phrases = [
'I love to sing because it\'s fun',
'where are you going',
'can I call you tomorrow',
'why did you talk while I was talking',
'she enjoys reading books and playing games',
'where are you going',
'have a great day',
'she sells seashells on the seashore'
];
var phrasePara = document.querySelector('.phrase');
var resultPara = document.querySelector('.result');
var diagnosticPara = document.querySelector('.output');
var testBtn = document.querySelector('button');
function randomPhrase() {
var number = Math.floor(Math.random() * phrases.length);
return number;
}
function testSpeech() {
testBtn.disabled = true;
testBtn.textContent = 'Test in progress';
var phrase = phrases[randomPhrase()];
// To ensure case consistency while checking with the returned output text
phrase = phrase.toLowerCase();
phrasePara.textContent = phrase;
resultPara.textContent = 'Right or wrong?';
resultPara.style.background = 'rgba(0,0,0,0.2)';
diagnosticPara.textContent = '...diagnostic messages';
var grammar = '#JSGF V1.0; grammar phrase; public <phrase> = ' + phrase +';';
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.start();
recognition.onresult = function(event) {
// The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
// The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
// It has a getter so it can be accessed like an array
// The first [0] returns the SpeechRecognitionResult at position 0.
// Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
// These also have getters so they can be accessed like arrays.
// The second [0] returns the SpeechRecognitionAlternative at position 0.
// We then return the transcript property of the SpeechRecognitionAlternative object
var speechResult = event.results[0][0].transcript.toLowerCase();
diagnosticPara.textContent = 'Speech received: ' + speechResult + '.';
if(speechResult === phrase) {
resultPara.textContent = 'I heard the correct phrase!';
resultPara.style.background = 'lime';
} else {
resultPara.textContent = 'That didn\'t sound right.';
resultPara.style.background = 'red';
}
console.log('Confidence: ' + event.results[0][0].confidence);
}
recognition.onspeechend = function() {
recognition.stop();
testBtn.disabled = false;
testBtn.textContent = 'Start new test';
}
recognition.onerror = function(event) {
testBtn.disabled = false;
testBtn.textContent = 'Start new test';
diagnosticPara.textContent = 'Error occurred in recognition: ' + event.error;
}
recognition.onaudiostart = function(event) {
//Fired when the user agent has started to capture audio.
console.log('SpeechRecognition.onaudiostart');
}
recognition.onaudioend = function(event) {
//Fired when the user agent has finished capturing audio.
console.log('SpeechRecognition.onaudioend');
}
recognition.onend = function(event) {
//Fired when the speech recognition service has disconnected.
console.log('SpeechRecognition.onend');
}
recognition.onnomatch = function(event) {
//Fired when the speech recognition service returns a final result with no significant recognition. This may involve some degree of recognition, which doesn't meet or exceed the confidence threshold.
console.log('SpeechRecognition.onnomatch');
}
recognition.onsoundstart = function(event) {
//Fired when any sound — recognisable speech or not — has been detected.
console.log('SpeechRecognition.onsoundstart');
}
recognition.onsoundend = function(event) {
//Fired when any sound — recognisable speech or not — has stopped being detected.
console.log('SpeechRecognition.onsoundend');
}
recognition.onspeechstart = function (event) {
//Fired when sound that is recognised by the speech recognition service as speech has been detected.
console.log('SpeechRecognition.onspeechstart');
}
recognition.onstart = function(event) {
//Fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
console.log('SpeechRecognition.onstart');
}
}
testBtn.addEventListener('click', testSpeech);
web-speech-api/phrase-matcher/style.css 0 → 100644
+ 54
− 0
View file @ ad8fa023
body, html {
margin: 0;
}
html {
height: 100%;
background-color: teal;
}
body {
height: inherit;
overflow: hidden;
}
h1, p {
font-family: sans-serif;
text-align: center;
}
div p {
padding: 20px;
background-color: rgba(0,0,0,0.2);
}
div {
overflow: auto;
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
button {
margin: 0 auto;
display: block;
font-size: 1.1rem;
width: 170px;
line-height: 2;
margin-top: 30px;
}
@media all and (max-height: 410px) {
div {
position: static;
}
}
.phrase {
font-weight: bold;
}
.output {
font-style: italic;
}
\ No newline at end of file
web-speech-api/speak-easy-synthesis/img/ws128.png 0 → 100644
+ 0
− 0
View file @ ad8fa023
web-speech-api/speak-easy-synthesis/img/ws128.png

61.1 KiB

web-speech-api/speak-easy-synthesis/img/ws512.png 0 → 100644
+ 0
− 0
View file @ ad8fa023
web-speech-api/speak-easy-synthesis/img/ws512.png

110 KiB

web-speech-api/speak-easy-synthesis/index.html 0 → 100644
+ 44
− 0
View file @ ad8fa023
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>Speech synthesiser</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Speech synthesiser</h1>
<p>
Enter some text in the input below and press return or the "play" button
to hear it. change voices using the dropdown menu.
</p>
<form>
<label for="txt">Enter text</label>
<input id="txt" type="text" class="txt" />
<div>
<label for="rate">Rate</label
><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate" />
<div class="rate-value">1</div>
<div class="clearfix"></div>
</div>
<div>
<label for="pitch">Pitch</label
><input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
<div class="pitch-value">1</div>
<div class="clearfix"></div>
</div>
<select></select>
<div class="controls">
<button id="play" type="submit">Play</button>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
web-speech-api/speak-easy-synthesis/manifest.webapp 0 → 100644
+ 14
− 0
View file @ ad8fa023
{
"name": "SpeechSyn",
"description": "Web Speech API speech synthesis demo",
"launch_path": "/index.html",
"icons": {
"512": "/img/ws512.png",
"128": "/img/ws128.png"
},
"developer": {
"name": "Chris Mills",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API"
},
"default_locale": "en"
}
\ No newline at end of file
web-speech-api/speak-easy-synthesis/script.js 0 → 100644
+ 102
− 0
View file @ ad8fa023
const synth = window.speechSynthesis;
const inputForm = document.querySelector("form");
const inputTxt = document.querySelector(".txt");
const voiceSelect = document.querySelector("select");
const pitch = document.querySelector("#pitch");
const pitchValue = document.querySelector(".pitch-value");
const rate = document.querySelector("#rate");
const rateValue = document.querySelector(".rate-value");
let voices = [];
function populateVoiceList() {
voices = synth.getVoices().sort(function (a, b) {
const aname = a.name.toUpperCase();
const bname = b.name.toUpperCase();
if (aname < bname) {
return -1;
} else if (aname == bname) {
return 0;
} else {
return +1;
}
});
const selectedIndex =
voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
voiceSelect.innerHTML = "";
for (let i = 0; i < voices.length; i++) {
const option = document.createElement("option");
option.textContent = `${voices[i].name} (${voices[i].lang})`;
if (voices[i].default) {
option.textContent += " -- DEFAULT";
}
option.setAttribute("data-lang", voices[i].lang);
option.setAttribute("data-name", voices[i].name);
voiceSelect.appendChild(option);
}
voiceSelect.selectedIndex = selectedIndex;
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
function speak() {
if (synth.speaking) {
console.error("speechSynthesis.speaking");
return;
}
if (inputTxt.value !== "") {
const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
utterThis.onend = function (event) {
console.log("SpeechSynthesisUtterance.onend");
};
utterThis.onerror = function (event) {
console.error("SpeechSynthesisUtterance.onerror");
};
const selectedOption =
voiceSelect.selectedOptions[0].getAttribute("data-name");
for (let i = 0; i < voices.length; i++) {
if (voices[i].name === selectedOption) {
utterThis.voice = voices[i];
break;
}
}
utterThis.pitch = pitch.value;
utterThis.rate = rate.value;
synth.speak(utterThis);
}
}
inputForm.onsubmit = function (event) {
event.preventDefault();
speak();
inputTxt.blur();
};
pitch.onchange = function () {
pitchValue.textContent = pitch.value;
};
rate.onchange = function () {
rateValue.textContent = rate.value;
};
voiceSelect.onchange = function () {
speak();
};
web-speech-api/speak-easy-synthesis/style.css 0 → 100644
+ 74
− 0
View file @ ad8fa023
body, html {
margin: 0;
}
html {
height: 100%;
}
body {
height: 90%;
max-width: 800px;
margin: 0 auto;
}
h1, p {
font-family: sans-serif;
text-align: center;
padding: 20px;
}
.txt, select, form > div {
display: block;
margin: 0 auto;
font-family: sans-serif;
font-size: 16px;
padding: 5px;
}
.txt {
width: 80%;
}
select {
width: 83%;
}
form > div {
width: 81%;
}
.txt, form > div {
margin-bottom: 10px;
overflow: auto;
}
.clearfix {
clear: both;
}
label {
float: left;
width: 10%;
line-height: 1.5;
}
.rate-value, .pitch-value {
float: right;
width: 5%;
line-height: 1.5;
}
#rate, #pitch {
float: right;
width: 81%;
}
.controls {
text-align: center;
margin-top: 10px;
}
.controls button {
padding: 10px;
}
\ No newline at end of file
web-speech-api/speech-color-changer/img/ws128.png 0 → 100644
+ 0
− 0
View file @ ad8fa023
web-speech-api/speech-color-changer/img/ws128.png

2.79 KiB

web-speech-api/speech-color-changer/img/ws512.png 0 → 100644
+ 0
− 0
View file @ ad8fa023
web-speech-api/speech-color-changer/img/ws512.png

11.3 KiB

web-speech-api/speech-color-changer/index.html 0 → 100644
+ 23
− 0
View file @ ad8fa023
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>Speech color changer</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Speech color changer</h1>
<p class="hints"></p>
<div>
<p class="output"><em>...diagnostic messages</em></p>
</div>
<script src="script.js"></script>
</body>
</html>
web-speech-api/speech-color-changer/manifest.webapp 0 → 100644
+ 23
− 0
View file @ ad8fa023
{
"name": "SpeechRec",
"description": "Web Speech API speech recognition demo",
"type": "privileged",
"launch_path": "/index.html",
"icons": {
"512": "/img/ws512.png",
"128": "/img/ws128.png"
},
"developer": {
"name": "Chris Mills",
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API"
},
"default_locale": "en",
"permissions": {
"audio-capture" : {
"description" : "Audio capture"
},
"speech-recognition" : {
"description" : "Speech recognition"
}
}
}
\ No newline at end of file
web-speech-api/speech-color-changer/script.js 0 → 100644
+ 62
− 0
View file @ ad8fa023
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
var SpeechGrammarList = SpeechGrammarList || window.webkitSpeechGrammarList
var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral', 'crimson', 'cyan', 'fuchsia', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'indigo', 'ivory', 'khaki', 'lavender', 'lime', 'linen', 'magenta', 'maroon', 'moccasin', 'navy', 'olive', 'orange', 'orchid', 'peru', 'pink', 'plum', 'purple', 'red', 'salmon', 'sienna', 'silver', 'snow', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'white', 'yellow'];
var recognition = new SpeechRecognition();
if (SpeechGrammarList) {
// SpeechGrammarList is not currently available in Safari, and does not have any effect in any other browser.
// This code is provided as a demonstration of possible capability. You may choose not to use it.
var speechRecognitionList = new SpeechGrammarList();
var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
}
recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
var diagnostic = document.querySelector('.output');
var bg = document.querySelector('html');
var hints = document.querySelector('.hints');
var colorHTML= '';
colors.forEach(function(v, i, a){
console.log(v, i);
colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
});
hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
document.body.onclick = function() {
recognition.start();
console.log('Ready to receive a color command.');
}
recognition.onresult = function(event) {
// The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
// The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
// It has a getter so it can be accessed like an array
// The first [0] returns the SpeechRecognitionResult at the last position.
// Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
// These also have getters so they can be accessed like arrays.
// The second [0] returns the SpeechRecognitionAlternative at position 0.
// We then return the transcript property of the SpeechRecognitionAlternative object
var color = event.results[0][0].transcript;
diagnostic.textContent = 'Result received: ' + color + '.';
bg.style.backgroundColor = color;
console.log('Confidence: ' + event.results[0][0].confidence);
}
recognition.onspeechend = function() {
recognition.stop();
}
recognition.onnomatch = function(event) {
diagnostic.textContent = "I didn't recognise that color.";
}
recognition.onerror = function(event) {
diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
}
web-speech-api/speech-color-changer/style.css 0 → 100644
+ 38
− 0
View file @ ad8fa023
body, html {
margin: 0;
}
html {
height: 100%;
}
body {
height: inherit;
overflow: hidden;
max-width: 800px;
margin: 0 auto;
}
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);
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment