Merge pull request #21 from claustra01/add_sound

add: sound_file&音声を追加

cspell.json

@@ -2,5 +2,5 @@
   "ignorePaths": ["node_modules/**", "*.svg"],
   "version": "0.2",
   "language": "en",
-  "words": ["NATSUMATSURI", "yatai", "Dela", "Yuji", "Syuku", "zustand"]
+  "words": ["NATSUMATSURI", "yatai", "Dela", "Yuji", "Syuku", "zustand", "wadaiko"]
 }

src/pages/home/index.tsx

@@ -24,7 +24,18 @@ function Home() {
 	}, []);
 
 	const handleClick = () => {
-		window.location.href = isPcScreen ? "/yatai" : "/shooter";
+		const audio = new Audio("/sound/wadaiko.mp3");
+		audio
+			.play()
+			.then(() => {
+				setTimeout(() => {
+					window.location.href = isPcScreen ? "/yatai" : "/shooter";
+				}, 500);
+			})
+			.catch((error) => {
+				console.error("オーディオの音が出なかった", error);
+				window.location.href = isPcScreen ? "/yatai" : "/shooter";
+			});
 	};
 
 	return (

src/pages/shooter/index.tsx

@@ -16,7 +16,16 @@ function Shooter() {
 	const [images, setImages] = useState(initialImages);
 
 	const handleClick = () => {
-		setImages((prevImages) => prevImages.slice(1));
+		const audio = new Audio("/sound/cork_sound.mp3");
+		audio
+			.play()
+			.then(() => {
+				setImages((prevImages) => prevImages.slice(1));
+			})
+			.catch((error) => {
+				console.error("オーディオの音が出なかった", error);
+				setImages((prevImages) => prevImages.slice(1));
+			});
 	};
 
 	const handleKeyUp: KeyboardEventHandler<HTMLDivElement> = (event) => {