Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ikuma-t
September 17, 2023

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

社内LT会の資料

ikuma-t

September 17, 2023
Tweet

More Decks by ikuma-t

Other Decks in Programming

Transcript

  1. たどころくん
    1
    号を支える技術
    ikuma-t
    むせていたって喋りたい!
    エンペイてくtech
    大LT
    大会 ver 0.1.0
    2023-09-15

    View full-size slide

  2. ikuma-t
    IkumaTadokoro
    ikumatdkr
    ikuma-t.com
    ikumatadokoro
    株式会社エンペイで働く、フロントエンドが好きなエンジニア。
    表情パターンは9
    割笑顔、1
    割(´
    ・ω
    ・`)
    なやさおです。

    View full-size slide

  3. コロナ後で声がうまく出せない
    状況を技術でどう乗り切ったか
    今回のテーマ

    View full-size slide

  4. 製品紹介

    View full-size slide

  5. たどころくん
    1

    ローカルで動く機械音声通話アプリ
    ブラウザさえあれば動作する
    搭載している機能
    発話
    ピッチ調整
    プリセット機能
    履歴機能
    竹村さん腹筋崩壊機能

    View full-size slide

  6. 導入実績
    開発チームの日常におけるコミュニケーション:導入事例多数
    イベントファシリテーション:多くのデイリースクラムでご利用いただいてます!
    登壇:
    重要なイベントでも肉声による発表と一切遜色なく遂行した実績あり
    ライトなLT
    イベントでもご利用いただいてます
    竹村さんの腹筋を崩壊させた数:プライスレス
    様々なシーンでご利用いただいてます

    View full-size slide

  7. 技術紹介

    View full-size slide

  8. SpeechSynthesisUtterance
    音声読み上げのコアとなる技術
    SpeechSynthesisUtterance
    はウェブ音声 API
    のインターフェイスで、発話リクエストを表します。 これには、発話サービスが読み上げ
    るコンテンツと、その読み上げ方についての情報(言語、音の高低、音量)が含まれます。
    これだけで機械音声による読み上げが実装できます。
    ちなみに「Synthesis
    」は「合成」、「Utterance
    」は「発声」という意味です(合成音声読み上げAPI

    ブラウザ標準の音声合成API
    const uttr = new SpeechSynthesisUtterance("
    ずんだもんだぞ");
    window.speechSynthesis.speak(uttr);

    View full-size slide

  9. たどころくん
    1
    号の正体

    実際にブラウザで確認してみます
    たどころくん
    1
    号の正体は
    ...

    Kyoko
    」!
    見た目は機械音声、中身は…
    const voices = window.speechSynthesis.getVoices()
    //
    日本語向けの音声を確認する
    const locale = 'ja-JP'
    const japaneseVoices = voices.filter((voice) => voice.lang === locale)
    //
    これが機械音声を喋っている人の真の名前...
    japaneseVoices[0].name

    View full-size slide

  10. 履歴管理
    永続化にはlocalStorage
    を使用しています。プレゼンもこれで乗り切ります。
    意外と便利

    View full-size slide

  11. システム音声を通話アプリに載せる
    1.
    (スピーカーに漏れ出る前にキャッチ)Blackhole
    でシステム音を拾えるようにする
    2.
    (正直よくわからん)Audio MIDI
    設定でBlackhole
    と音声出力デバイスを合成した装置を作る
    3.
    (システム音声を外部にむける)通話アプリのマイクをBlackhole
    にする
    試行錯誤してM1 Mac
    だとこれでできたってやつ

    View full-size slide

  12. 開発小話
    開発リポジトリの名前は「
    bossun

    機械音声といえば、ということで「スイッチ」と名付けようとしたが、「switch

    がプログラミングとしては汎用的な名前すぎて、ネタアプリに使うのは微妙という
    ことで、同じSKET DANCE
    から「ボッスン」を採用
    制作は高速、されど仕事は進まず
    「明日は復帰できるかな?」と思った日に勢いで1h
    もかからないでアプリ実装。
    実装は高速で終わったものの、体調が万全でない中無理をしたため、翌日は一日中
    頭がぼーっとして仕事どころではなかったです。

    View full-size slide

  13. 喋らなくていいおかげで肺の負担は下げられたし、
    皆さんにも楽しんでいただけたようでなによりです
    おわり

    View full-size slide

  14. ありがとうございました!
    Slides on ikuma-t.com

    View full-size slide