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
Talking Web Apps by @odelaguila
Search
gdljs
February 24, 2016
Technology
0
30
Talking Web Apps by @odelaguila
Slides de la décima sesión de GDLJS del 23 de Febrero
Talking web apps
gdljs
February 24, 2016
Tweet
Share
More Decks by gdljs
See All by gdljs
Construyendo la mejor experiencia de pagos en línea by @IvanChukitow
gdljs
0
66
Testabilidad en Javascript by @codingpains
gdljs
0
27
Desarrollo de aplicaciones con react native by @charliesbox
gdljs
0
120
¿Debería usar la librería de moda en mi proyecto? by @siedrix
gdljs
0
120
Agile Gamification by @chukitow
gdljs
0
42
Por qué hicimos nuestro propio NodeJS framework by @sgarza
gdljs
0
29
¿Cómo empezar a programar? by @amicavi
gdljs
0
83
Concurrencia y Paralelismo en Javascript by @eatcodetravel
gdljs
0
480
Caldo de Kafka para Node by @albertain
gdljs
0
69
Other Decks in Technology
See All in Technology
大規模データとの戦い方
knih
1
470
依存ライブラリはどこに?
takesection
0
110
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
150
KTC_DBRE.pdf
_awache
1
290
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
200
Building a RAG app to chat with your data (on Azure)
pamelafox
0
100
Why do you get AWS certificates
hirosys
0
110
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
140
KubeCon EU 2024 : Knative Maintainers Session
salaboy
0
370
どう買う?Azure
kuniteru
1
190
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
6
630
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.8k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
174
21k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Designing the Hi-DPI Web
ddemaree
275
33k
Producing Creativity
orderedlist
PRO
335
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Making Projects Easy
brettharned
106
5.4k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
The Invisible Side of Design
smashingmag
293
49k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
The Language of Interfaces
destraynor
150
23k
Transcript
Talking web apps
Orlando Del Aguila
None
@eatcodetravel eatcodetravel.com hashlabs.com
Talking web apps
Speech Synthesis API Web Speech API
Speech Synthesis API Web Speech API
Support Speech Synthesis
API Speech Synthesis Volume Rate Pitch Language Voice
API Speech Synthesis 1 var msg, voices; 2 msg =
new SpeechSynthesisUtterance(); 3 voices = window.speechSynthesis.getVoices(); 4 5 // some voices don't support altering params 6 msg.voice = voices[10]; 7 msg.voiceURI = 'native'; 8 msg.volume = 1; // 0 to 1 9 msg.rate = 1; // 0.1 to 10 10 msg.pitch = 2; //0 to 2 11 msg.text = 'Hello World'; 12 msg.lang = 'en-US';
API Speech Synthesis 1 var msg, voices; 2 msg =
new SpeechSynthesisUtterance(); 3 voices = window.speechSynthesis.getVoices(); 4 5 6 7 8 9 10 11 12 13
API Speech Synthesis 4 5 // some voices don't support
altering params 6 msg.voice = voices[10]; 7 msg.voiceURI = 'native'; 8 msg.volume = 1; // 0 to 1 9 msg.rate = 1; // 0.1 to 10 10 msg.pitch = 1; //0 to 2 11 msg.text = 'Hello World'; 12 msg.lang = ‘en-US'; 13 speechSynthesis.speak(msg); 1 2 3
API Speech Synthesis 1 // speechSynthesis has a queue, 2
// and you don't need to worry about it. 3 speechSynthesis.speak(msg); 4 speechSynthesis.cancel(); 5 speechSynthesis.pause(); 6 speechSynthesis.resume();
API Speech Synthesis 1 // SpeechSynthesisUtterance has events 2 var
msg = new SpeechSynthesisUtterance(); 3 4 msg.onstart = function onstart() {}; 5 msg.onend = function onend() {}; 6 msg.onerror = function onerror() {}; 7 msg.onpause = function onpause() {}; 8 msg.onboundary = function onboundary() {};
Speech Synthesis API DEMO
Speech Synthesis API Web Speech API
Support Web Speech API
API Language Continuous InterimResults Web Speech API
API onstart onend onresults onerror Web Speech API
API Web Speech API 1 // notice the webkit prefix
2 var recognition; 3 recognition = new webkitSpeechRecognition(); 4 recognition.lang = 'es-VE'; 5 recognition.continuous = true; 6 recognition.interimResults = false; 7 8 // Events 9 recognition.onstart = function () {}; 10 recognition.onend = function () {}; 11 recognition.onresult = function () {}; 12 recognition.onerror = function () {}; 13 recognition.start();
API Web Speech API 1 2 3 4 5 6
7 8 9 10 11 12 13 11 recognition.onresult = function () {};
API Web Speech API 1 recognition.onresult = function (event) {
2 var length, transcript, msg; 3 length = event.results.length - 1; 4 transcript = event.results[length][0].transcript; 5 transcript = transcript.trim(); 6 7 console.log(transcript); 8 9 msg = new SpeechSynthesisUtterance(message); 10 msg.text = message; 11 window.speechSynthesis.speak(msg); 12 }
Web Speech API DEMO
Resources
Web apps that talk Voice driven apps MDN Web Speech
API Web Speech API Spec
QA
Thanks