# OOSMTimer この記事は[群馬高専 Advent Calendar 2021](https://adventar.org/calendars/6424) 18日目の記事です。 # はじめに ### これは何？ OOSM-Timer(Online Out Set Mini-Timer)（仮）です。今回はお試しなのでボタンを押すと5分のカウントが始まり、残り3分の時とカウント終了の時になると音声で教えてくれます。 ### なぜ作った？ 実際の小テストをやっている感じで勉強したい人がいると思ったから。 # できたページ https://oosmtimer.vercel.app # 作成 ### 音声の作成 始めはWeb Speech APIを使ってすませよう（そうすれば好きな文を入れたりもできるし...）と思いましたが、しっくり来なかったのでテキスト読み上げソフトウェアで生成した音声ファイルを再生することにしました。有名どころではボイスロイドとかがありますが、今回使用したのは[VOICEVOX](https://voicevox.hiroshiba.jp/)というソフトです。リリースされた頃にニコ動で見て感動したのを覚えています。使ったことはなかったのでこの機会に使ってみました。（各キャラクターの利用規約に守った上で）商用・非商用問わず無料で使えます。ﾔｯﾀｰ!! キャラクターは「春日部つむぎ」さんにしました。埼玉県の高校に通う女の子です。CVは「春日部つくし」さんで数日前に埼玉バーチャル観光大使に任命され、うちの県知事と対談してました。 テキストを入力するとするといい感じに調整されます。こんな感じのUIでアクセント、イントネーションや長さを変更することもどきます。今回は、ちょっといじって本家？の発音にできる限り近づけました。 ![](https://i.imgur.com/kwX9Tpk.png) ### ページ作成 表示されるはボタンだけにして~~作るのが面倒なので~~時間の表示はせずに実際のテストに近い感じにしました。 ![](https://i.imgur.com/yNVQGjP.png) はじめは大きめに、次に小さめに２回教えてくれます。 ```javascript= atosanpun.volume=1; atosanpun.play(); atosanpun.volume=0.3; atosanpun.play(); ``` ### 作ってみて デバイスをアクティブ状態じゃないとタイマーが止まる書き方になっているため画面には何も表示されないくせに常に開いとかないと動きません。テスト中はスマホいじれんしいいや... 自動端末がでスリープしないようにするには裏で動画を流すことで対処できます。動画を見ていると操作していなくても画面がスリープしないのを体験したことがある方がいると思います。今回はこちらの[NoSleep.js](https://github.com/richtr/NoSleep.js)パッケージを使ってみました。