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
たどころくん1号を支える技術
Search
ikuma-t
September 17, 2023
Programming
1
260
たどころくん1号を支える技術
社内LT会の資料
ikuma-t
September 17, 2023
Tweet
Share
More Decks by ikuma-t
See All by ikuma-t
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
620
いまさらのStorybook
ikumatadokoro
0
490
これで最後にしたい! Astroと立ち向かう 6度目の個人ブログ再開発
ikumatadokoro
5
1.1k
Panda CSS と Ark UI ではじめる個人開発
ikumatadokoro
4
1.7k
見た目から始める生産性向上
ikumatadokoro
11
5.6k
ぼくが 美容師さんに伝えたかった バンドの話
ikumatadokoro
0
210
Railsアプリをコスパよく読むための環境整備
ikumatadokoro
2
990
HTTPを手で書いて学ぶ ファイルアップロードの仕組み
ikumatadokoro
80
30k
なんだか うまくいっている を 自分たちの いつもどおり に 定着させるためのチーム戦略
ikumatadokoro
4
720
Other Decks in Programming
See All in Programming
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
120
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
560
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
980
技術好きなエンジニアが "リーダーへの進化" によって得たものと失ったもの
pospome
5
1.3k
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.6k
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
170
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
690
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
2.7k
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
2.9k
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.1k
エンジニア未経験が最短で戦力になるためのTips
gokana
0
190
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Code Review Best Practice
trishagee
67
18k
GraphQLとの向き合い方2022年版
quramy
45
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Git: the NoSQL Database
bkeepers
PRO
429
65k
We Have a Design System, Now What?
morganepeng
51
7.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
490
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Done Done
chrislema
183
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Transcript
たどころくん 1 号を支える技術 ikuma-t むせていたって喋りたい! エンペイてくtech 大LT 大会 ver 0.1.0
2023-09-15
ikuma-t IkumaTadokoro ikumatdkr ikuma-t.com ikumatadokoro 株式会社エンペイで働く、フロントエンドが好きなエンジニア。 表情パターンは9 割笑顔、1 割(´ ・ω
・`) なやさおです。
コロナ後で声がうまく出せない 状況を技術でどう乗り切ったか 今回のテーマ
製品紹介
たどころくん 1 号 ローカルで動く機械音声通話アプリ ブラウザさえあれば動作する 搭載している機能 発話 ピッチ調整 プリセット機能 履歴機能
竹村さん腹筋崩壊機能
導入実績 開発チームの日常におけるコミュニケーション:導入事例多数 イベントファシリテーション:多くのデイリースクラムでご利用いただいてます! 登壇: 重要なイベントでも肉声による発表と一切遜色なく遂行した実績あり ライトなLT イベントでもご利用いただいてます 竹村さんの腹筋を崩壊させた数:プライスレス 様々なシーンでご利用いただいてます
技術紹介
SpeechSynthesisUtterance 音声読み上げのコアとなる技術 SpeechSynthesisUtterance はウェブ音声 API のインターフェイスで、発話リクエストを表します。 これには、発話サービスが読み上げ るコンテンツと、その読み上げ方についての情報(言語、音の高低、音量)が含まれます。 これだけで機械音声による読み上げが実装できます。 ちなみに「Synthesis
」は「合成」、「Utterance 」は「発声」という意味です(合成音声読み上げAPI ) ブラウザ標準の音声合成API const uttr = new SpeechSynthesisUtterance(" ずんだもんだぞ"); window.speechSynthesis.speak(uttr);
たどころくん 1 号の正体 … 実際にブラウザで確認してみます たどころくん 1 号の正体は ... 「
Kyoko 」! 見た目は機械音声、中身は… const voices = window.speechSynthesis.getVoices() // 日本語向けの音声を確認する const locale = 'ja-JP' const japaneseVoices = voices.filter((voice) => voice.lang === locale) // これが機械音声を喋っている人の真の名前... japaneseVoices[0].name
履歴管理 永続化にはlocalStorage を使用しています。プレゼンもこれで乗り切ります。 意外と便利
システム音声を通話アプリに載せる 1. (スピーカーに漏れ出る前にキャッチ)Blackhole でシステム音を拾えるようにする 2. (正直よくわからん)Audio MIDI 設定でBlackhole と音声出力デバイスを合成した装置を作る 3.
(システム音声を外部にむける)通話アプリのマイクをBlackhole にする 試行錯誤してM1 Mac だとこれでできたってやつ
開発小話 開発リポジトリの名前は「 bossun 」 機械音声といえば、ということで「スイッチ」と名付けようとしたが、「switch 」 がプログラミングとしては汎用的な名前すぎて、ネタアプリに使うのは微妙という ことで、同じSKET DANCE から「ボッスン」を採用
制作は高速、されど仕事は進まず 「明日は復帰できるかな?」と思った日に勢いで1h もかからないでアプリ実装。 実装は高速で終わったものの、体調が万全でない中無理をしたため、翌日は一日中 頭がぼーっとして仕事どころではなかったです。
喋らなくていいおかげで肺の負担は下げられたし、 皆さんにも楽しんでいただけたようでなによりです おわり
ありがとうございました! Slides on ikuma-t.com