jsでAudio要素を順番に再生するメモ


Html5 tts

米国におるのですが、先週末にサマータイムが終了して1時間ズレました。
その後、部屋の時計とか電子レンジとかの時刻修正をしなくてはならなかったのですがiPhoneもmacも自動で時刻が修正されており感心した次第です。

ところで愛用しているcaisoのG-shockさんは手動で治したのですが、最近のは自動で補正できるみたいですね。
そう考えていたらスマートウォッチが欲しくなりました。
2014年の秋。


googleのTTS-APIを順番に再生したい

なんでそうなったか?
googleのTextToSpeech APIは一度に変換できる文字数の上限が100文字との事(2014年11月現在)。
つまり、今回300文字近くの文章を喋らせようとしていたので3分割くらいせにゃいかんのか。

と、いうわけで3つAudioオブジェクトを作ったのはいいのですが、

var TTS_URL = "http://translate.google.com/translate_tts?tl=jp&q=";
var msg1 = "無駄無駄無駄無駄無駄無駄無駄無駄・・(略)・・";
var msg2 = "オラオラオラオラオラオラオラオラ・・(略)・・";
var msg3 = "アリアリアリアリアリアリアリアリ・・(略)・・";
var tts1 = new Audio( TTS_URL + msg1 );
var tts2 = new Audio( TTS_URL + msg2 );
var tts3 = new Audio( TTS_URL + msg3 );
tts1.play();
tts2.play();
tts3.play();

と、書いた所あぁそうかjsか
という結果に。 まさに聖徳太子ごっこ状態。

前のAudioオブジェクトが終わってから再生したい。

非同期で再生するのを回避する為に、Deferredを使って試行錯誤したのですが、
これってAudioの再生終了イベントは把握しないまま return promise するんですか?

だれに聞いてるのかは自分でも不明

全然うまくいかなく、MCハマーだったのですが、諦めて寝て次の日の朝に全然違う方法・・・ っつーかeventListnerをカマしたら一発で期待どおりの挙動に。。

tts1.play();
tts1.addEventListener("ended",function(){
  tts2.play();
  tts2.addEventListener("ended", function(){
    tts3.play();
  }, false);
}, false);

はい、結局callback地獄でした。。

もう少しスマートな方法はないものでしょうか。
時間がある時にもう少し調べてupdateしたいです。

おわり

 

2014-11-04 | Posted in JavaScript - jQueryNo Comments » 


関連記事

Comment





Comment



*