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