はじめに

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

startボタンを押すと読み上げが始まります。stopで止まって、startで再開。

1枚目は8秒待ちます。長い!!!!

実行例

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

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

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

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

最近の作品の中では一番の大作です。百人一首のデータだけでも使い道があるかもしれない。データは手入力なので不備があります。見つかり次第直す予定。100首全部あります。

hookはuseStateとuseEffectを使っている。hookを使ってcomponentは使っていない。component苦手。

プログラムのきっかけはnetflixでアニメ「ちはやふる」を見た事です。面白かった。

React+TypeScriptが性に合っていたらしく最近いろんなプログラムをReact+TypeScriptに翻訳してcodepenに載せる作業をしています。
よかったら普段ははてなにいますので見に来て下さい。

codepenはソースを見れるし、動いているのを確認出来るし大好きです。

そそ、このプログラムではサイトの読み込み時にシャフルしてあとは頭から読んでいるのでとりあえず重複はないけれど、最後まで行ったらまた頭から読み続けます。終わらせることも出来るけど続く方がいいかな、と思ってこの仕様にしている。つもり。100首通して聞いたことがないので未確認。

追記!!!! => 今iphoneのclomeで試したら音が出ない。出ているサイト https://codepen.io/kalz2q/pen/poKOJmZ もあるので原因がわからない。全く同じように実装しているつもりなのだが。