（なぜこれを書いたか？）
現在、Clickには音声再生機能が無いので音を出すことは出来ないとずっと思っていましたが、GoogleDriveとClickのWebViewを使って簡単に音声ファイルが再生できることが分かりました。

その結果、クイズアプリで正解だったらピンポンピンポン♪～、不正解だったらブ～！という効果音を出すことが出来るようになりました。当初、それだけで喜んでいたのですが、そのうちに人が話す言葉を再現出来たら更に面白いのではと考えるようになりました。

調べていくとテキスト文章を音声ファイルに変換する技術を応用すればこれは簡単に実現できそうだという事が分かりました。本ブログではClickで音声再生するまでの具体的手順を説明します。

１．サンプルアプリを作りました

イメージが湧きやすいようにサンプルアプリを作りました。
（内容）
2人の大学生が登場し、それぞれ自己紹介をするという内容です。一人はアメリカからの留学生で東京の大学で学んでいるという想定。もう一人は国内の女子大学生です。

何でアメリカからの留学生が登場するのかというと、テキストを音声ファイルに変換する技術レベルがいけてなくて、十分意味は通じるんだけど日本人の使う日本語と比べて少し違和感を感じたからです。これは日本語を学んでいる留学生が話す日本語に近いと勝手に判断し、そういう設定をしました。

（アプリのホーム画面）
アメリカ人のジョンさんと仙台在住の葵（あおい）さんが登場します。

（サンプルアプリ）

（作成手順）
①テキストから音声ファイル（.mp3）を合成する
②GoogleDriveにファイルをアップロードする
③音声再生用のURLを作成
④ClickでWebViewを配置し、URLを記入する

２．テキストから音声ファイルの合成

～最終的に「音読さん」を使うことにした～
当初私にとって一番の難関がこの部分でした。どうやればテキストから音声ファイルが作れるのか皆目見当もつきませんでした。ネットで調べるとGoogleのCloud Text to Speechが評判が良いことを知り、これを使ってみることにしました。しかし、使うまでの設定や認証等が面倒なので途中で嫌になり、投げ出してしまいました。

最終的にはテキストを音声ファイルに変換する「音読さん」というオンラインサービスを使うことにしました。無料と有料が有るのですが、登録すれば無料でも月当たり5000文字までは無料で使えます。「音読さん」はこれと言った設定も認証も無いのに結構音質がいいのが気に入りました。

①「音読さん」のWebサイト（「https://ondoku3.com/ja/」）

②「音読さん」の基本的機能
「音読さん」を使った音声ファイルの作り方は簡単です。テキスト入力欄にテキストを書き込んで、画面下方にある「読み上げ」ボタンを押すとテキストを音声ファイル（.mp3）に変換してくれます。

更に「ダウンロード」ボタンを押すとPCのデスクトップ上などにファイルがダウンロードされます。

③ 音声ファイルの調整
「音読さん」で作られた音声ファイルを初めて聞いたときは「何だこりゃ！？全然使えないじゃないか！」と感じました。しかし、音の高低、話の速度や話し方の切り替え設定が有り、いろいろいじっていたらそこそこ聞けるレベルになってきました。

面白いのは選択画面に男性の名前や女性の名前がいくつかリストアップされていて、いずれかを選択するとその人なり（キャラクター？）の話し方で文章を読み上げてくれるのです。ちょっと子供っぽい感じだったり、アナウンサーが話すような感じだったり、抑揚が無く事務的な話し方だったり、本当にいろいろあって選ぶのに迷います。

設定を変えて試行錯誤しながらやっていくとまあまあの音声ファイルが出来ると思います。その他の音声ファイル合成アプリも試してみましたが、私の中では「音読さん」が一番いい結果でした。

３．GoogleDriveにファイルをアップロード

音声ファイルを入れるフォルダーをまず作成し、その中に音声ファイルを入れて下さい。（下記画像ではsoundという名称のフォルダーに音声ファイルが5個入っています）

他の人に音声ファイルが聞こえるようにするには共有設定を「このリンクを知っている全員」にして下さい。そうしないと音声が再生されません。

（フォルダーの共有設定）
この設定は忘れずやって下さい。

４．音声ファイル再生用のURLを作成する

ここは間違いやすい部分なので十分注意して下さい。GoogleDriveに入れたファイルは選択して右クリックすると「リンクを取得」という項目が出てきて、ファイルのURLが取得できますが、今回使うのはこのURLではありません。音声ファイル再生用の別のURL（下記）が必要になってきます。

（音声ファイル再生用のURLの形）
https://drive.google.com/uc?id={ファイルID}

このファイルIDはどこから持って来るかというと「リンクを取得」で得られるURLの真ん中あたりに出ています。（下記）

例：「リンクを取得」で得られるURLの構造
「https://drive.google.com/file/d/｛ファイルID｝/view?usp=drive_link」」

「https://drive.google.com/file/d/164PaYqOgU5exuW80JcaeARP5NCMcT15g/view?usp=drive_link」

５．ClickでWebViewを設定する

～WebViewの配置～
このサンプルアプリでは2人の大学生の自己紹介の音声ファイルが必要なのでWebViewも２つ用意して下さい。

WebViewは通常とても大きいサイズですが、縮めて下記画像位のサイズにして下さい。ここに表示されるのは音声再生のプレーヤーのボタン類だけなので小さくしても問題無いです。

～URLの記入～
画面右側にWebViewで使うURL欄があるので、ここに上記で作成した音声ファイル再生用URLを入れて下さい。
「https://drive.google.com/uc?id={ファイルID}」

この段階でプレビュー画面を見ると以下のような表示になります。WebViewの所に音声ファイル再生プレーヤーのボタンが表示されていいます。

一応これで完成ですが、ちょっと残念な部分が残っています。

～残念な部分～
現在、Clickには音声再生機能が無いのでClickのボタンと音声再生は連動しないのです。音声ファイルを再生させるにはあくまでその再生プレーヤーの再生ボタンを直接、手動で押してやらなければならないのです。ClickFlowで制御したいのですが今はそれが出来ません。
しかしいづれ出来る時期が来ると思いますのでそれまでは出来る範囲の中で何とか活用していきましょう。

（過去の投稿）
https://note.com/mucho3