web speech APIでgetVoicesが失敗して日本語が読み込めない！

最近「web speech API」でいろいろ実験をしています。

「web speech API」とは、javascriptを使ってブラウザ上で音声を読み上げたり、音声を聞き取ったりできるAPIです。

この「web speech API」に日本語テキストを読み上げさせようとしてるのですが、なかなか難しいです。「getVoices()」によって日本語の音声セットを読み込もうとするとなぜか失敗してnullが返ってきてしまうのです。

いろいろいじくりまわした結果、以下のようにして日本語をおしゃべりさせることができました。

var Yomiage = function(){
  this.speech = null;

  this.start = function(){
    this.speech = new SpeechSynthesisUtterance();
    this.speech.volume = 1;
    this.speech.rate = 1;
    this.speech.pitch = 2;
    this.speech.text = "";
    this.speech.lang = "ja-JP";
    this._set_voice();
  };
  this._set_voice = function(){
    var self = this;
    speechSynthesis.onvoiceschanged = function(){
      var voices = speechSynthesis.getVoices();
      for (var i = 0; i < voices.length; i++) {
        if (voices[i].lang == "ja-JP"){
          self.speech.voice = voices[i];
        }
      }
    };
  };
  this.talk = function(str){
    this.speech.text = str;
    speechSynthesis.speak(this.speech);
  };
}

var yomiage = new Yomiage();

$(window).load(function(){
  if (!'SpeechSynthesisUtterance' in window) {
    alert('Web Speech API には未対応です.');
    return;
  }
  yomiage.start();

  $("#speech-btn").click(function(){
    var str = "やった！日本語しゃべれたよ！";
    yomiage.talk(str);
  });
});

「getVoices()」はどうも上記のように「onvoiceschanged」というイベントを待った後でないとロードができないようです。

「getVoices()」の返り値は「index 7番」に日本語セットが入っているとか「index 11番」に日本語セットが入っているとか、いろいろ情報が錯綜していて皆さん混乱されているようですが、私の場合は「11番」に日本語が入っていました。

私のブラウザ（chrome ver.44）ではこれでうまくいきました。「#speech-btn」のボタンをクリックすると、とてもウザい声でおしゃべりしてくれます・・。

↓デモページはここ！
http://absgexp.net/web-speech/