Designing voice interfaces
summary
A clear claim: the CSS Speech module exists but CSS Speech is unimplemented in browsers, leaving authors unable to design oral presentation the way they style visual layout. Concrete tools and vendors: SSML, Google Text‑to‑Speech API, Microsoft Azure, Descript voice cloning and on‑device iOS voice training. Surprising numbers: 300 ms to utter “hello,” audio processes ~100× faster than vision, a Harvard study with ~160 recruiters, conversational ~150 wpm vs one user listening at ~550 wpm. A polyfill demo (Stuart Language) works for exploration but isn’t production ready and browsers need an OS opt‑out setting.
AI-written summary · about
chapters (26)
- 0:00Introduction
- 0:37Welcome
- 0:57Why are voices important
- 3:00Hollywood understands voice
- 5:04Synthetic speech
- 10:28Ssml
- 14:17CSS speech
- 15:23Why we need it
- 17:20Voice properties
- 20:33Use cases
- 22:39Web of the early 90s
- 24:12Other use cases
- 25:53Design outcome
- 30:45Call to action
- 32:42Questions
- 34:35Favorite voice
- 35:40Rate of speed
- 36:57Arya vs CSS Beach
- 37:34Hints
- 38:57Default CSS properties
- 39:37Why CSS speech hasnt been implemented
- 40:45Googles voice reader
- 42:29Semantics
- 44:16UI patterns
- 45:30Emojis
- 46:45Fast talk
related talks
58mAdding Speech to your Web App_UIArchitecture
48mConversational ULS: Talking to Siri, Alexa, and Your Web Browser
38mConversational UIs: Talking to Siri, Alexa, and Your Web Browser
29mFinding Your Voice: Building Screenless Interfaces with Node.js
28mWhat’s Needed in Tech to bring Voice to the Future
55mDesigning for speech
32mSpeech Recognition as a Progressive Enhancement
16mSpeech Recognition on the Web