ブラウザでsay PPAP🍍🍎✑

帰ってきたWebSpeechSynthesisAPI版

ふと気がつくとJavaでPPAPしてる人がいた。

Siriに聞いても歌ってくれるしダウンロードランキングに何故かいるうちにChromeに喋って歌ってもらおう。

思いつきで書いてしまった。(結果寝れなかった)

let finished = false;
const s = new SpeechSynthesisUtterance();
const ppap = [
  'ペン',
  'パイナップル',
  'アップル',
];
/**
  0: undef,
  1: p
  2: pp
  3: ppa
  4: ppap
*/
let state = 0;

const next = ()=>{
  if(finished)return;
  const n = Math.floor(Math.random()*3);
  let item = ppap[n];
  if (state === n || state === 3 && n === 0) {
    state++;
  } else if (state === 4) {
    finished = true;
    item = 'Pen Pineapple Apple Pen!';
  } else {
    state = 0;
  }
  const p = document.createElement('p');
  p.textContent = item;
  document.body.appendChild(p);
  s.text = item;
  speechSynthesis.speak(s);
};

s.addEventListener('end', next);
next();

コードがクソ。

前回とは違ってちゃんと喋り終わってからインクリメントするようになりました。
終わんねぇ

デモ：http://codepen.io/hinaloe/full/bBWPMp/

注意点としてはmacOSのデフォルト音声であるKyokoに「Apple Pen」を読み上げてもらうと有無を言わずにブラウザがクラッシュする問題があるようです。
(sample: http://codepen.io/hinaloe/pen/XNRveG )

なお、Chromeに付属のGoogle 日本語ではこの問題は発生しませんでした。

自社製品の名前で死ぬってどういうことなんだ……「Apple Pencil」でも同様に死にます。というかこれ「Apple なんとか」で必ず死ぬしどうなってるんだ……
※sayコマンドでこの問題は発生しません

あ、ちなみにFirefoxだとそのままでは動きません。FirefoxはSpeechSynthesisUtteranceを使いまわせないみたい。(こっちが正しい挙動？)=>修正版
Firefoxでもクラッシュはしない模様。

P.S.
Chrome canaryでも大丈夫だった。環境問題かもしれないしキャッシュかなんか壊れてるのかなぁ(?)、それとも既知の修正住みバグ踏んだ？