Merge pull request #16 from HeesuKim0203/feat/audio

feat : Add background audio
HeesuKim0203 · Mar 6, 2024 · f160e48 · f160e48
2 parents 84f8d39 + 9c58994
commit f160e48
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/audio_off.png b/public/audio_off.png
diff --git a/public/audio_on.png b/public/audio_on.png
diff --git a/public/bgm.mp3 b/public/bgm.mp3
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,11 @@
 import React from 'react' ;
-import { BrowserRouter, Route, Routes } from 'react-router-dom' ;
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
 
 import './App.css'
 
 import Home from './page/home'
 import History from './page/history'
-import { HOME, HISTORY } from './util/url' ;
+import { HOME, HISTORY } from './util/url' 
 
 function App() {
   return (

diff --git a/src/AudioPlayer.tsx b/src/AudioPlayer.tsx
@@ -0,0 +1,39 @@
+import React, { useState, useRef } from 'react';
+
+interface AudioPlayerProps {
+  src: string
+}
+
+const AudioPlayerComponent: React.FC<AudioPlayerProps> = ({ src }) => {
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const [isPlaying, setIsPlaying] = useState<boolean>(false)
+
+  const handlePlay = () => {
+
+    const audio = audioRef.current
+
+    if (audio) {
+        setIsPlaying(!isPlaying)
+
+        if (!isPlaying) {
+          audio.play().catch((error) => {
+            console.error("Audio Error : ", error)
+            setIsPlaying(false)
+          })
+        } else {
+          audio.pause()
+        }
+    }
+  };
+
+  return (
+    <div className = 'absolute top-8 right-8 text-2xl text-white' >
+      <audio ref = { audioRef } src = { src } loop />
+      <button className = 'flex items-center' onClick = { handlePlay } >
+        <img className = 'w-5 h-7' src = {isPlaying ? `${ process.env.PUBLIC_URL }/audio_on.png` : `${ process.env.PUBLIC_URL }/audio_off.png`} alt = "Audio button" />
+      </button>
+    </div>
+  );
+}
+
+export default AudioPlayerComponent ;
diff --git a/src/page/home/index.tsx b/src/page/home/index.tsx
@@ -17,6 +17,7 @@ import {
     BACK_BUTTON_TEXT
 } from '../../util/text'
 import { USER_LIFE, USER_SCORE } from '../../util/className'
+import AudioPlayer from '../../AudioPlayer'
 
 type Prop = {
     displayStatus : string
@@ -104,7 +105,7 @@ function GameScreen({ displayStatus, setDisplayStatus } : Prop) {
 
 function Home() {
 
-    const [ displayStatus, setDisplayStatus ] = useState<string>(START_SCREEN) ;
+    const [ displayStatus, setDisplayStatus ] = useState<string>(START_SCREEN)
 
     return (
         <div className = "flex flex-col relative items-center w-screen h-screen bg-[url('/public/background.png')]">
@@ -119,6 +120,9 @@ function Home() {
                     }
                 })()
             }
+            <AudioPlayer 
+                src = {`${ process.env.PUBLIC_URL }/bgm.mp3`}
+            />
         </div>
     ) ;
 }