'************************************** ' 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 ' ' ' Inputs:None ' ' Returns:None ' 'Assumes:None ' 'Side Effects:None '************************************** <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>