소개

최근 문장 읽기 앱을 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에의 기사를 쓰면서, 자신의 설명력 부족을 통감했습니다・・・.