視覚的なタイマーを作りたい
hajimism要件
- 30~120min、15分ごとに設定できればいいかな
- 残り時間の減りが視覚的にわかる
- 終わったら音がなる
- pauseもできる
hajimism適当にvisual timer reactでググったらこれが出てきた。神OSSだな。
hajimismCodeSandboxから色々拝借して出発する
hajimismStart/Stop/Resetはアイコンが欲しい
状態を明示するためにStartとStopは交代表示がいい
hajimismlucide使いがち
hajimismえ、なんか変なエラー出て動かないんだけど
'PlayCircle' cannot be used as a JSX component.
Its type 'IconNode' is not a valid JSX element type.
SVGベタ貼りで解決した
なにこれ
hajimismResetはkeyの変更で実現した
const reset = useCallback(() => {
setKey();
playStop();
}, [playStop, setKey]);
順当
hajimismresetのアイコン、こっちにした
hajimism次は秒数選択だな
hajimism15,30,45,60,75,90 minでProgressbarにするか
hajimismnodeが繋がってて選べるようなやつ転がってないかな
hajimismコントロールできない
hajimismあーこいつSliderっていうらしいわ
hajimismchakraにもおった
hajimismRadixありがとう
hajimismRadixでやった
一応できたけどstepごとにmarkつけるのはできてない
hajimismexport const getTimeSeconds = (time: number) => (minuteSeconds - time) | 0;
これで整数に丸めてるのちょっとエッチだな
hajimism音ならすかー
hajimismVSCodeのmp3表示めちゃいいやん
hajimismmp3読み込めない。ファイルの位置は関係ない。
hajimismtsの問題はこれ書けば消えた
declare module "*.mp3";
一方でloaderの問題は残った
⨯ ./public/celebration.mp3
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
use-soundのREADMEに書いてあった
If you try to pull this trick in another React build system like Next.js, you may get an error like this:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
The problem is that Webpack (the bundler used under-the-hood to generate JS bundles) doesn't know how to process an MP3 file.
If you have access to the Webpack config, you can update it to use file-loader, which will create a dynamic, publicly-accessible path to the file.
Alternatively, most tools will give you a "public" (create-react-app, Next.js) or a "static" (Gatsby) folder. You can drop your audio files in there, and then use a string path.
The sound files you'll use with use-sound follow the same rules as other static assets like images or fonts. Follow the guides for your meta-framework of choice:
hajimismni -D file-loaderしてこれをnextConfigに付け加えるとビルドは通った
webpack(config) {
config.module.rules.push({
test: /\.mp3$/,
use: {
loader: "file-loader",
},
});
return config;
},
use-soundが機能してない
そもそもこれで型エラーなるし
<button onClick={play}>play</button>
これでも鳴らない
<button onClick={() => play()}>play</button>
あーなんか、こっちに直接パスを指定したら音なった
const [play] = useSound("/celebration.mp3", { volume: 0.25 });
適当に色とfavicon設定した
