Help us understand the problem. What is going on with this article?

文章読み上げアプリをJavaScriptで作成してみました

はじめに

最近文章読み上げアプリをJavaScriptで作成したので作成するうえで苦労した点などをまとめてみます。
アプリはHerokuにアップしてあるので、リンクへ飛んでいただければ試していただけます。
読みあげ君へのリンクはこちら
どうして"読みあげ君”を作ろうと思ったかというと、”初音ミク”に似たソフトで誰の声でも当てられたら面白いな、と感じたことがキッカケです。

読みあげ君の画像↓

読み上げ君画像.png

苦労した点について

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への記事を書きながら、自分の説明力不足を痛感しました・・・。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした