Updates

gmoe · Apr 24, 2024 · a82f861 · a82f861
1 parent 386fedc
commit a82f861
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,user-scalable=no"><meta name="description" content="A web emulation of Bell Labs VODER speech synthesizer from the 1939-40 New York World's Fair."><title>Voder Speech Synthesizer (1939)</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"><link rel="icon" sizes="16x16 32x32" href="favicon.ico"><link rel="apple-touch-icon-precomposed" href="assets/favicon-152.png"><meta name="msapplication-TileColor" content="340f20"><meta name="msapplication-TileImage" content="assets/favicon-144.png"><link rel="icon" href="favicon.ico"><script defer="defer" src="main.js"></script><link href="main.css" rel="stylesheet"></head><body><div class="proscenium proscenium-left" aria-hidden="true"></div><div class="proscenium proscenium-right" aria-hidden="true"></div><main><header><h1 class="site-title">The Voder</h1><img id="logo" src="assets/logo_final.svg" alt="Voder Logo, as seen on the original 1939 World's Fair poster."></header><section><p>The Voder was an early attempt at speech synthesis developed by Bell Telephone Laboratory for the 1939-40 New York World's Fair. Controlled by hand, the operator manually forms each syllable using complex button sequences and it would take about a year of practice to able to produce fluid speech.</p><p>Helen Harper was one of the first people to figure out how to operate the Voder effectively, and was the live demonstrator at the World's Fair. She later went on to form a year-long course instructing women to use the Voder. Of 100 applied students, only 20 were able to graduate and match Harper's skills.</p><p>This application puts you in the shoes of one of Helen's students, learning how to operate the Voder which was seen as a potential replacement for telephone operators.</p><div class="yt-embed"><iframe title="YouTube embedded video demonstrating the original Voder at the 1939 World's Fair." width="560" height="315" src="https://www.youtube.com/embed/0rAyrmm7vv0" frameborder="0" allowfullscreen></iframe></div><p>Try create vowel formants pressing the button combinations below on your keyboard, or if you are using a mobile device scroll down and tap console display:</p><ul><li><kbd>D + V + J</kbd>: [ɑ] as in "father"</li><li><kbd>A + K</kbd>: [ē] as in "heed"</li><li><kbd>A + D</kbd>: [ōō] as in "pool"</li><li><kbd>Space</kbd>: unvoiced noise</li></ul><p>Replicating the sequence "She saw me" like in the video above requires the following inputs with exact timing; experiment until it sounds right to you. The results will not sound exactly like the video because of subtle articulations the operator is performing for inflection and dynamics.</p><dl><dt>“She (shē)</dt><dd><ol><li><kbd>Space</kbd>: [sh]</li><li><kbd>A + K</kbd>: [ē]</li></ol></dd><dt>saw (sô)</dt><dd><ol><li><kbd>Space</kbd>: [s]</li><li><kbd>D + V + J</kbd>: [ô]</li></ol></dd><dt>me.” (mē)</dt><dd><ol><li><kbd>A</kbd>: [m]</li><li><kbd>A + K</kbd>: [ē]</li></ol></dd></dl><p>After you get the hang of the former example, try saying "She seesaws" by resequencing some of the formants.</p></section><section id="canvas-container"><canvas id="console-display" width="420" height="320">Your browser does not have the necessary support to run this application. You might also have Javascript disabled.</canvas><div id="start-audio-overlay"><button id="start-audio-btn">Start</button> <span id="mobile-warning">Rotate your device to landscape for an optimal experience.</span></div></section><footer><div id="footerContent"><img id="footer-console-operator" src="assets/console_operator.svg" alt="Illustration of woman at Voder console"> <span class="footer-message">Bell System Exhibit</span> <span class="footer-message">World's Fair of 1940</span> <span class="footer-message">in New York</span><div class="footer-contacts"><a aria-label="Voder source code, hosted on GitHub." href="http://github.com/gmoe/voder"><span class="fa fa-github fa-2x"></span> </a><a aria-label="Griffin Moe's Twitter account." href="http://twitter.com/griffin_moe"><span class="fa fa-twitter fa-2x"></span> </a><a aria-label="Griffin Moe's résumé and personal site." href="http://griffin.moe/"><span class="fa fa-laptop fa-2x"></span></a></div></div></footer></main></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,user-scalable=no"><meta name="description" content="A web emulation of Bell Labs VODER speech synthesizer from the 1939-40 New York World's Fair."><title>Voder Speech Synthesizer (1939)</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"><link rel="icon" sizes="16x16 32x32" href="favicon.ico"><link rel="apple-touch-icon-precomposed" href="assets/favicon-152.png"><meta name="msapplication-TileColor" content="340f20"><meta name="msapplication-TileImage" content="assets/favicon-144.png"><link rel="icon" href="https://griffin.moe/voder/favicon.ico"><script defer="defer" src="https://griffin.moe/voder/main.js"></script><link href="https://griffin.moe/voder/main.css" rel="stylesheet"></head><body><div class="proscenium proscenium-left" aria-hidden="true"></div><div class="proscenium proscenium-right" aria-hidden="true"></div><main><header><h1 class="site-title">The Voder</h1><img id="logo" src="assets/logo_final.svg" alt="Voder Logo, as seen on the original 1939 World's Fair poster."></header><section><p>The Voder was an early attempt at speech synthesis developed by Bell Telephone Laboratory for the 1939-40 New York World's Fair. Controlled by hand, the operator manually forms each syllable using complex button sequences and it would take about a year of practice to able to produce fluid speech.</p><p>Helen Harper was one of the first people to figure out how to operate the Voder effectively, and was the live demonstrator at the World's Fair. She later went on to form a year-long course instructing women to use the Voder. Of 100 applied students, only 20 were able to graduate and match Harper's skills.</p><p>This application puts you in the shoes of one of Helen's students, learning how to operate the Voder which was seen as a potential replacement for telephone operators.</p><div class="yt-embed"><iframe title="YouTube embedded video demonstrating the original Voder at the 1939 World's Fair." width="560" height="315" src="https://www.youtube.com/embed/0rAyrmm7vv0" frameborder="0" allowfullscreen></iframe></div><p>Try create vowel formants pressing the button combinations below on your keyboard, or if you are using a mobile device scroll down and tap console display:</p><ul><li><kbd>D + V + J</kbd>: [ɑ] as in "father"</li><li><kbd>A + K</kbd>: [ē] as in "heed"</li><li><kbd>A + D</kbd>: [ōō] as in "pool"</li><li><kbd>Space</kbd>: unvoiced noise</li></ul><p>Replicating the sequence "She saw me" like in the video above requires the following inputs with exact timing; experiment until it sounds right to you. The results will not sound exactly like the video because of subtle articulations the operator is performing for inflection and dynamics.</p><dl><dt>“She (shē)</dt><dd><ol><li><kbd>Space</kbd>: [sh]</li><li><kbd>A + K</kbd>: [ē]</li></ol></dd><dt>saw (sô)</dt><dd><ol><li><kbd>Space</kbd>: [s]</li><li><kbd>D + V + J</kbd>: [ô]</li></ol></dd><dt>me.” (mē)</dt><dd><ol><li><kbd>A</kbd>: [m]</li><li><kbd>A + K</kbd>: [ē]</li></ol></dd></dl><p>After you get the hang of the former example, try saying "She seesaws" by resequencing some of the formants.</p></section><section id="canvas-container"><canvas id="console-display" width="420" height="320">Your browser does not have the necessary support to run this application. You might also have Javascript disabled.</canvas><div id="start-audio-overlay"><button id="start-audio-btn">Start</button> <span id="mobile-warning">Rotate your device to landscape for an optimal experience.</span></div></section><footer><div id="footerContent"><img id="footer-console-operator" src="assets/console_operator.svg" alt="Illustration of woman at Voder console"> <span class="footer-message">Bell System Exhibit</span> <span class="footer-message">World's Fair of 1940</span> <span class="footer-message">in New York</span><div class="footer-contacts"><a aria-label="Voder source code, hosted on GitHub." href="http://github.com/gmoe/voder"><span class="fa fa-github fa-2x"></span> </a><a aria-label="Griffin Moe's Twitter account." href="http://twitter.com/griffin_moe"><span class="fa fa-twitter fa-2x"></span> </a><a aria-label="Griffin Moe's résumé and personal site." href="http://griffin.moe/"><span class="fa fa-laptop fa-2x"></span></a></div></div></footer></main></body></html>
diff --git a/main.css b/main.css