百人一首読み上げプログラム

はじめに

音声読み上げ(WebSpeechAPI)を使って、百人一首の読み上げサイトが作れるのではないか、と思いついてReact+TypeScriptで作ってみました。

startボタンを押すと読み上げが始まります。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

解説

読み上げはwindows.speechSynthesisと言うのを使っています。あまりナチュラルな日本語に聞こえないけど頑張っている!
とりあえず百人一首に聞こえるものね。

音声の頭が欠けるのを防ぐために、「ん。」を出だしに入れているので不要な人はエディターで一括削除して下さい。

一枚読み上げるのに8秒かかるので、intervalを8000にしたところ、startを押しても8秒経たないと始まらないのをどうにかしたいが、方法が思いつかない。

最近の作品の中では一番の大作です。 百人一首のデータだけでも使い道があるかもしれない。