diff --git a/components/Soundboard/index.tsx b/components/Soundboard/index.tsx index 9db39fc..f2f63b1 100644 --- a/components/Soundboard/index.tsx +++ b/components/Soundboard/index.tsx @@ -1,36 +1,58 @@ "use client" -import { useRef } from 'react'; +import { RefObject, useRef } from 'react'; export default function Soundboard() { - const audioRef = useRef(null); + const boyYouPlayRef = useRef(null); + const eatItUpRef = useRef(null); + const gangbustersRef = useRef(null); + const huskyRef = useRef(null); + const prettyFlagsRef = useRef(null); + const hobbsRef = useRef(null); + const goodLookingBandRef = useRef(null); + const impressiveRef = useRef(null); + const tallTubasRef = useRef(null); + const wildChartRef = useRef(null); + const scaredMeRef = useRef(null); + const notBadRef = useRef(null); + const strongTubasRef = useRef(null); + const tallBandRef = useRef(null); - const getButton = (title: string, src: string) => { + const getButton = (title: string, ref: RefObject) => { return + onClick={() => ref.current?.play()}>{title} } return (
- {getButton("Boy you play!", "/boyyouplay.m4a")} - {getButton("Eat It Up!", "/eatitup.m4a")} - {getButton("Gangbusters", "/gangbusters.m4a")} - {getButton("Husky", "/husky.m4a")} - {getButton("Pretty Flags", "/prettyflags.m4a")} - {getButton("Hobbs", "/hobbs.m4a")} - {getButton("Good Looking Band", "/goodlookingband.m4a")} - {getButton("Pretty Impressive", "/impressive.m4a")} - {getButton("3 Tall Tubas", "/talltubas.m4a")} - {getButton("Wild Chart", "/wildchart.m4a")} - {getButton("Scared Me", "/scared.m4a")} - {getButton("Not Bad", "/notbad.m4a")} - {getButton("Strong Tubas", "/strongtubas.m4a")} - {getButton("Tall Band", "/tallband.m4a")} -
); } \ No newline at end of file