jinkoslide.txt

class: center, middle


### 人工音声
### ポッドキャスト
### メーカーを
### 作ってみた



---
### 自己紹介

@basictomonokai

.left[![img](https://i.imgur.com/a3ataoO.jpg)]

* ただのおじさん
* .red[非エンジニア]
* 趣味でプログラミング（ＪＳ、ＧＡＳあたり）
* 元はBASIC界隈の人（低レベル）


---
### １．作ったきっかけ

* 参加者に2,000円を支給するアプリ等コンテストがあった為


<img src="https://i.imgur.com/iUkmX2k.png">

---
#### １－１．マスコットアプリ文化祭

https://mascot-apps-contest.azurewebsites.net/

* みんなで楽しめるアプリコンテストです。
* キャラクターを利用した「アプリ」や<b>「アプリ以外の作品」</b>を募集
* 「萌えキャラ」的なキャラクター

---
### ２．作ったきっかけ（２）

音声合成で、無料でポッドキャストを作りたかった

* 元々GAS＋JSで作っていた
* GAS内でGoogle Cloud Speech APIで音声合成
* Cloud Speech APIは、一定文字数以上は有料
* Chromeの機能で実装できそう
> * Web Speech APIのSpeechSynthesis
> * MediaStream Recording APIのMediaRecorder

---
### ３．しかし…

SpeechSynthesisで問題なくテキスト⇒音声にできたがMediaRecorderで録音できず

* MediaRecorderはマイク入力の録音用
* 合成音声は、マイク入力ではなくChromeでは録音不可

これは、ブラウザの仕様…

---
### ４．仕方なく…

ブラウザー設定をいじって利用する形に…(;^_^A

* Chromeのマイク設定をマイク入力からステレオミキサーに
* ステレオミキサーにすれば録音できた

完全にWindowsの機能に依存…(;^_^A

---
### ５．更に…

MediaRecorderは、WebMでしか保存できなかった

* 多分、ポッドキャストはMP3が主流
* Seesaaブログは音声はmp3およびm4a形式のみ
* 当然、一般的なMP3で保存できると思っていた

---
### ６．仕方なく…

FFMPEG（WASM）を使ってWebM→MP3画面を作った

<img src="https://i.imgur.com/wVV3hoz.jpg">

---
### ７．最終的に３つの画面に

* テキストから合成音声画面
* WEBM音声をMP3に変換画面
* 無音、メイン、音楽のMP3を結合画面

結合画面もFFMPEG（WASM）を利用

---


### ８．しょぼいけど作ったもの

<iframe width="560" height="315" src="https://www.youtube.com/embed/JO6ShRtPwz8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


---
class: center, middle

### おしまい