嗨咿，我是illumi，都有動畫了，怎麼可以沒有音效呢？一起來當網頁混音師吧！

1. 音效元件

如果你用React，音效包成一個 useSound.ts 元件：

import { useRef } from "react";

export function useSound(src: string) {
  const audioRef = useRef<HTMLAudioElement>(new Audio(src));

  const play = () => {
    const audio = audioRef.current;
    if (!audio) return;
    audio.currentTime = 0;
    audio.play().catch((err) => console.warn("Audio play blocked:", err));
  };

  return play;
}

2. 使用

只要指定音檔路徑（建議放在 public/sounds/ 下面）

import { useSound } from "@/hooks/useSound";

export default function 元件名稱() {
	const playClick = useSound("/sounds/blast.mp3");
	return (
	<Button onClick={playClick}>立即體驗</Button>);
}

就會得到將～～

3. 放哪種音檔？

建議用 MP3：

• 檔案小
• 所有瀏覽器支援
• 雖然不是無損，但夠用

如果真的要高音質 → AAC；想無損 → FLAC（但 Safari 不支援）。

4. 都去哪裡找音效：

• 小森平的免費下載音效
• MotionElements
• Pixabay
• Mixkit
• 効果音ラボ

今天就這樣愉快的結束啦～ 明天期待什麼主題呢？