はじめに
最近文章読み上げアプリをJavaScriptで作成したので作成するうえで苦労した点などをまとめてみます。
アプリはHerokuにアップしてあるので、リンクへ飛んでいただければ試していただけます。
読みあげ君へのリンクはこちら
どうして"読みあげ君”を作ろうと思ったかというと、”初音ミク”に似たソフトで誰の声でも当てられたら面白いな、と感じたことがキッカケです。
読みあげ君の画像↓
苦労した点について
1.テキストエリアへ打ち込まれた文字と音声を対応させる方法
2.音声を連続で再生する方法
1.テキストエリアへ打ち込まれた文字と音声を対応させる方法
この解決策はとても単純で、連想配列を使用しました。
var voiceDictionary={1:'あ',2:'い',............71:'ぽ'};
といった風に1文字ずつキー値と対応させる方法です。
詳しいコードはリンク先で見ていただければ、と思いますが例えば、"あほか"と打ち込まれたとすると
あ→1、ほ→30、か→6といった風に連想配列を用いて数値へと変換します。
あとは、voiceDictionaryの音表通りに声のmp3ファイルを個別に配置していくことで、文字と音声の対応が出来ました。
2.音声を連続で再生する方法
最初は、for文で(打ち込まれた文字数).lengthの回数を連続で鳴らそうかと思ったのですが、何度やってもfor文ではうまくいかなかったので
(オーディオインスタンスの変数名).addEventListener('ended',function(){
//(オーディオインスタンス).play();が終了した後動作させたいコードを入れる
}
という構文を追加することで解決できました。
この構文の前に、
(オーディオインスタンス).play();
というコードがあるのですが、そのplay();が終了したことを検知して、動作する構文となっています。
そして、その構文の中に音声を連続で再生するためのアルゴリズムを入れたら上手く解決できました。
終わりに
つたない説明で申し訳ありません。
Qiitaへの記事を書きながら、自分の説明力不足を痛感しました・・・。