Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Web Speech API
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Pascal Helfenstein
March 04, 2015
Programming
94
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Web Speech API
Pascal Helfenstein
March 04, 2015
More Decks by Pascal Helfenstein
See All by Pascal Helfenstein
Chatbots
nicam
1
98
Service Worker
nicam
0
75
IoT + Voice = Awesome
nicam
0
89
Introduction to AngularJS
nicam
1
170
Other Decks in Programming
See All in Programming
WebRTC映像をAirPlayに対応させる挑戦.pdf
monolithic_adam
0
320
MCP Appsでつくるチャット駆動な地図アプリ
nakamori1024
0
110
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
takehaya
6
2.5k
wkhtmltopdfの次どうするか問題2026
willnet
2
1.8k
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
palkan
1
350
一人だけ、Kiroが静止する日
hideg
0
130
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
myus4a
0
290
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
hatsu38
0
410
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
mpyw
0
440
ゲームコントローラやキーボードのファームウェアをSwiftで書く
kishikawakatsumi
1
260
GitHubハンズオン講座 — 実務レベルのチーム開発のフローを身につけよう
junhat6
0
110
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
prota
1
1.5k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
6.3k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
1
540
Into the Great Unknown - MozCon
thekraken
41
2.7k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
1k
GitHub's CSS Performance
jonrohan
1033
470k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.6k
SEO for Brand Visibility & Recognition
aleyda
0
4.8k
AI: The stuff that nobody shows you
jnunemaker
PRO
10
1.1k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
250
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
35
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Transcript
Web Speech APIs
$WHOAMI I am Pascal Helfenstein nicam
Why speech?
None
None
What do we need?
Speech Recognition Speech Synthesis “It can talk” “It can hear”
Some Intelligence “It can think”
The browser can do it!
How does it speak? var msg = new SpeechSynthesisUtterance('Hello World');
// Config (optional) msg.voice = 'Google UK English Male'; msg.volume = 1; // 0 <-> 1 msg.rate = 1.5; // 0 <-> 1 msg.pitch = 1; // 0 <-> 2 speechSynthesis.speak(msg);
How does it listen? var recognition = new webkitSpeechRecognition(); //
Config (optional) recognition.lang = "en-US"; // "de-DE", "en-IN" recognition.continuous = true; recognition.interimResults = true; recognition.addEventListener('result', function(event) { console.log(event.results[0][0].transcript); // "whats the time" console.log(event.results[0][0].confidence); // 0.93414807319641 }); recognition.addEventListener('end', function(event) { // Start your action }); recognition.start();
How does it think? \_(ツ)_/¯
Ask \_(ツ)_/¯
DEMO
WebSockets API Calls Demo architecture Speech Recognition Speech Synthesis
Browser Support
None
None
What to look out for • interactivity requires SSL… •
synthesising long texts breaks it • it’s not good in noisy environments
Questions?
Thanks!