たどころくん1号を支える技術

たどころくん 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

たどころくん1号を支える技術

たどころくん1号を支える技術

ikuma-t

More Decks by ikuma-t

Other Decks in Programming

Featured

Transcript