32:[] 30:{"title":"How long does it take a computer to say a number out loud","cells":[{"id":0,"value":"md`# How long does it take a computer to say a number out loud`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`I'm working on making a warm-up punch counter for Wing Tsun practice using the SpeechSynthesis API. It mostly involves the computer counting to ten at a constant rate. I want to be able to precisely control the rate at which the punches are counted out, but I'm constrained by how fast the browser can speak each number. I made this notebook to explore how long it takes for the speech synthesizer to say each number and how changing the rate affects that length.\n\nClick the buttons below to see the values fill in for how long it takes for each number.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"md`## Normal rate`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"{\n let button = html``;\n button.onclick = () => { countToTen(1, viewof normal_rate) };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"normal_rate","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"html`${normal_rate.map((time, i) => `${i + 1}: ${time}ms${i === normal_rate.length - 1 ? '' : ', '}`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"{\n let max = Math.max(...normal_rate);\n let index = normal_rate.indexOf(max);\n return md`Longest: __${index + 1}__: ${max}ms`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"md`## Adjusted rate\n\nYou can use the slider to adjust the rate. Then press the button to see how long each number takes at the adjusted rate.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`Adjusted rate: ${adjusted_rate}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"viewof adjusted_rate = DOM.range(1, 3, 0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"{\n let button = html``;\n button.onclick = () => { countToTen(adjusted_rate, viewof adjustable_rate) };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"adjustable_rate","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"html`${adjustable_rate.map((time, i) => `${i + 1}: ${time}ms${i === adjustable_rate.length - 1 ? '' : ', '}`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"{\n let max = Math.max(...adjustable_rate);\n let index = adjustable_rate.indexOf(max);\n return md`Longest: __${index + 1}__: ${max}ms`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`Below is the new time for each number divided by the normal time:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"html`${adjustable_rate.map((time, i) => `${i + 1}: ${normal_rate[i] ? Math.round(time/normal_rate[i] * 100) : \"\"}%${i === adjustable_rate.length - 1 ? '' : ', '}`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"md`## Change languages\n\nClick \"Get voices\" to get the different available voices.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"{\n let button = html``;\n button.onclick = () => { viewof voices.value = synth.getVoices() };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"md`Select a different language from the dropdown below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"viewof voice = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"function speak(text, rate, array){\n var utterThis = new window.SpeechSynthesisUtterance(text);\n utterThis.voice = voices[voice];\n utterThis.rate = rate;\n let start, difference;\n utterThis.onstart = function() { start = +new Date(); };\n utterThis.onend = function() { \n difference = +new Date() - start;\n array.value = [...array.value, difference];\n };\n synth.speak(utterThis);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"function countToTen(rate, array) {\n array.value = [];\n for (let i=0; i<10; i++) {\n speak(i+1, rate, array);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"synth = window.speechSynthesis","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"viewof voices = new View([])","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"viewof normal_rate = new View([])","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"viewof adjustable_rate = new View([])","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"class View {\n constructor(value) {\n this._list = [];\n this._value = value;\n }\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent({type: \"input\", value});\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}