START
RECOG">

VB icon

Webkit Oscillator preview

Email
Submitted on: 11/16/2016 2:33:15 PM
By: Nick Lappas  
Level: Advanced
User Rating: Unrated
Compatibility: HTML 5, CSS, JavaScript
Views: 2077
 
      START
RECOGNITION sps = new SpeechSynthesisUtterance(); function recognize() { rec = new webkitSpeechRecognition(); rec.lang = "el-GR"; sps.lang = "el-GR"; rec.start(); rec.onresult = function(e) { res = e.results[0][0].transcript; if(rec.lang == "el-GR") { if(res == "κίτρινο") { document.getElementById("styles").innerHTML = ' body{background:yellow;} '; sps.text = 'Background color set to yellow'; speechSynthesis.speak(sps); recognize(); } if(res == "κόκκινο") { document.getElementById("styles").innerHTML = ' body{background:red;} '; sps.text = 'Background color set to red'; speechSynthesis.speak(sps); recognize(); } if(res == "μπλε") { document.getElementById("styles").innerHTML = ' body{background:blue;} '; sps.text = 'Background color set to blue'; speechSynthesis.speak(sps); recognize(); } if(res == "πορτοκαλί") { document.getElementById("styles").innerHTML = ' body{background:orange;} '; sps.text = 'Background color set to orange'; speechSynthesis.speak(sps); recognize(); } if(res == "πράσινο") { document.getElementById("styles").innerHTML = ' body{background:green;} '; sps.text = 'Background color set to green'; speechSynthesis.speak(sps); recognize(); } if(res == "ροζ") { document.getElementById("styles").innerHTML = ' body{background:pink;} '; sps.text = 'Background color set to pink'; speechSynthesis.speak(sps); recognize(); } if(res == "μωβ") { document.getElementById("styles").innerHTML = ' body{background:purple;} '; sps.text = 'Background color set to purple'; speechSynthesis.speak(sps); recognize(); } if(res == "άσπρο") { document.getElementById("styles").innerHTML = ' body{background:white;} '; sps.text = 'Background color set to white'; speechSynthesis.speak(sps); recognize(); } if(res == "μαύρο") { document.getElementById("styles").innerHTML = ' body{background: black;} '; sps.text = 'Background color set to black'; speechSynthesis.speak(sps); recognize(); } document.getElementById("speech").innerHTML = res; }; } }
#speech { background: white; } button { background: green; border: green; border-radius: 100px; box-shadow: 5px 5px rgba(0, 75, 0, 1); color: white; } button:active { margin: 5px; box-shadow: none; } * { outline: none; } #error { color: red; background: white; }
 
code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!
				
'**************************************
' Name: Webkit Oscillator preview
' Description:<button onclick="recognize()">START</BR>RECOGNITION</button>
<script>
sps = new SpeechSynthesisUtterance();
function recognize() {
rec = new webkitSpeechRecognition();
rec.lang = "el-GR";
sps.lang = "el-GR";
rec.start();
rec.onresult = function(e) {
res = e.results[0][0].transcript;
if(rec.lang == "el-GR") {
if(res == "κίτρινο") {
document.getElementById("styles").innerHTML = '<style>body{background:yellow;}</style>';
sps.text = 'Background color set to yellow';
speechSynthesis.speak(sps);
recognize();
}
if(res == "κόκκινο") {
document.getElementById("styles").innerHTML = '<style>body{background:red;}</style>';
sps.text = 'Background color set to red';
speechSynthesis.speak(sps);
recognize();
}
if(res == "μπλε") {
document.getElementById("styles").innerHTML = '<style>body{background:blue;}</style>';
sps.text = 'Background color set to blue';
speechSynthesis.speak(sps);
recognize();
}
if(res == "πορτοκαλί") {
document.getElementById("styles").innerHTML = '<style>body{background:orange;}</style>';
sps.text = 'Background color set to orange';
speechSynthesis.speak(sps);
recognize();
}
if(res == "πράσινο") {
document.getElementById("styles").innerHTML = '<style>body{background:green;}</style>';
sps.text = 'Background color set to green';
speechSynthesis.speak(sps);
recognize();
}
if(res == "ροζ") {
document.getElementById("styles").innerHTML = '<style>body{background:pink;}</style>';
sps.text = 'Background color set to pink';
speechSynthesis.speak(sps);
recognize();
}
if(res == "μωβ") {
document.getElementById("styles").innerHTML = '<style>body{background:purple;}</style>';
sps.text = 'Background color set to purple';
speechSynthesis.speak(sps);
recognize();
}
if(res == "άσπρο") {
document.getElementById("styles").innerHTML = '<style>body{background:white;}</style>';
sps.text = 'Background color set to white';
speechSynthesis.speak(sps);
recognize();
}
if(res == "μαύρο") {
document.getElementById("styles").innerHTML = '<style>body{background: black;}</style>';
sps.text = 'Background color set to black';
speechSynthesis.speak(sps);
recognize();
}
document.getElementById("speech").innerHTML = res;
};
}
}
</script>
<div id="speech"></div><font id="error"></font>
<div id="styles"></div>
<style>
#speech {
background: white;
}
button {
background: green;
border: green;
border-radius: 100px;
box-shadow: 5px 5px rgba(0, 75, 0, 1);
color: white;
}
button:active {
margin: 5px;
box-shadow: none;
}
* {
outline: none;
}
#error {
color: red;
background: white;
}
</styles>
' By: Nick Lappas
'**************************************

<input type="range" oninput="update(this.value)" min="0" max="20000" value="0"> 
</br>
<input type="txt" id="freqIn" placeholder="Frequency (Hz)"><input type="button" onclick="sub()" value="SUBMIT">
<input type="button" value="STOP!" onclick="stop()">
</br>
<select onchange="opt()" id="waveform">
<option>sine</option>
<option>square</option>
<option>saw</option>
<option>triangle</option>
</select>
</br>
<input type="button" onclick="zero()" value="0Hz">
<input type="button" onclick="twenty()" value="20000Hz">
<input type="button" onmousedown="plusFive()" value="+5Hz">
<input type="button" onmousedown="minusFive()" value="-5Hz">
</br>
<style>
input[type=range] { 
-webkit-appearance: none; 
margin: 18px 0; width: 50% 
} 
input[type=range]:focus { 
outline: none; 
} 
input[type=range]::-webkit-slider-runnable-track {
width: 100%; 
height: 16.8px; 
cursor: pointer; 
animate: 0.2s; 
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
background: none; 
border-radius: 10px;
border: 0.2px solid #010101; 
} 
input[type=range]::-webkit-slider-thumb { 
box-shadow: 1px 1px 1px #0d0d0d, 0px 0px 1px #0d0d0d; 
border: 1px solid #000000; 
height: 36px; 
width: 16px; 
border-radius: 100px; 
background: #33aaaa;
cursor: pointer; 
-webkit-appearance: none; 
margin-top: -17.5px; 
height: 50px; 
width: 50px;
} 
input[type=range]:focus::-webkit-slider-runnable-track { 
background: white; 
}
input[type=button] {
height: 100px;
width: 150px;
border: none;
background: #33aaaa;
color: white;
font-size: 2em;
}
input[type=txt] {
height: 100px;
width: 250px;
position: relative;
font-size: 2em
}
#waveform {
height: 50px;
width: 250px;
font-size: 50px;
position: relative;
left: 150px;
top: 2px;
background: #33aaaa;
color: white;
}
</style>
<script>
var context = new window.webkitAudioContext();
var osc = context.createOscillator();
osc.frequency.value = 0;
osc.connect(context.destination);
osc.start(0);
function sub() {
freq = document.getElementById("freqIn").value;
osc.frequency.value = freq;
}
function stop() {
osc.frequency.value = 0;
}
function update(rFreq) {
osc.frequency.value = rFreq; document.getElementById("freqIn").value = rFreq;
}
function plusFive() {
if(osc.frequency.value < 20000) {
osc.frequency.value += 5;
}
if(osc.frequency.value == 20000) {
osc.frequency.value = 0;
}
document.getElementById("freqIn").value = osc.frequency.value;
}
function minusFive() {
if(osc.frequency.value > 0){
osc.frequency.value -= 5;
}
if(osc.frequency.value == 0) {
osc.frequency.value = 0;
}
document.getElementById("freqIn").value = osc.frequency.value;
}
function twenty() {
osc.frequency.value = 20000;
document.getElementById("freqIn").value = osc.frequency.value;
}
function zero() {
osc.frequency.value = 0;
document.getElementById("freqIn").value = osc.frequency.value;
}
function opt() {
var wvfm = document.getElementById("waveform").value;
osc.type = wvfm;
}
</script>


Other 1 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this code (in the Advanced category)?
(The code with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments

2/22/2017 9:01:54 AMDavid

HTML code as the description? Unreadable.
Could you put a proper introduction to what the code does, and how to use it. Thank you.
(If this comment was disrespectful, please report it.)

 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular code, please click here instead.)
 

To post feedback, first please login.