Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Speech API
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
97
Service Worker
nicam
0
75
IoT + Voice = Awesome
nicam
0
89
Introduction to AngularJS
nicam
1
160
Other Decks in Programming
See All in Programming
まずはプロンプトガイドを読もう、話はそれからだ
kiakiraki
1
250
Pythonの実行はどこまで賢くなったのか? CPythonとPyPyから見る最適化のしくみ
curekoshimizu
4
2.4k
Dockerfile CMD for Node.js
grazie1999
0
160
新人はどこまで自力でやり、どこからAIに頼るべきか/エンジニア育成に向き合う_先輩たちの悩みと知見共有会
toppan_digital_dev
1
430
AIと壁打ちしながら進めるコスト管理
fufuhu
2
1.9k
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
tatsuki12
4
1.6k
バグを直したら useEffect が消えた
colorful12
3
790
Claude Codeを組織的に動かして月400PRを実現した話
happy_ryo
0
230
go-spidermonkeyでAIエージェントのCode Modeを実装する
syumai
3
1.5k
AI駆動開発にグラフDBを重ねてみた
satoshi256kbyte
2
560
How I Won Prize Money at a Hackathon Using Codex and Symphony Alpha
yasei_no_otoko
0
130
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
har1101
2
420
Featured
See All Featured
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Prompt Engineering for Job Search
mfonobong
0
430
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
6.1k
So, you think you're a good person
axbom
PRO
2
2.1k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.3k
Accessibility Awareness
sabderemane
1
190
Music & Morning Musume
bryan
47
7.3k
Optimizing for Happiness
mojombo
378
71k
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!