97 lines
5.0 KiB
TypeScript
97 lines
5.0 KiB
TypeScript
"use client"
|
|
import { RefObject, useRef } from 'react';
|
|
|
|
export default function Soundboard() {
|
|
const boyYouPlayRef = useRef<HTMLAudioElement>(null);
|
|
const eatItUpRef = useRef<HTMLAudioElement>(null);
|
|
const gangbustersRef = useRef<HTMLAudioElement>(null);
|
|
const huskyRef = useRef<HTMLAudioElement>(null);
|
|
const prettyFlagsRef = useRef<HTMLAudioElement>(null);
|
|
const hobbsRef = useRef<HTMLAudioElement>(null);
|
|
const goodLookingBandRef = useRef<HTMLAudioElement>(null);
|
|
const impressiveRef = useRef<HTMLAudioElement>(null);
|
|
const tallTubasRef = useRef<HTMLAudioElement>(null);
|
|
const wildChartRef = useRef<HTMLAudioElement>(null);
|
|
const scaredMeRef = useRef<HTMLAudioElement>(null);
|
|
const notBadRef = useRef<HTMLAudioElement>(null);
|
|
const strongTubasRef = useRef<HTMLAudioElement>(null);
|
|
const tallBandRef = useRef<HTMLAudioElement>(null);
|
|
const blueRef = useRef<HTMLAudioElement>(null);
|
|
const carlsbadRef = useRef<HTMLAudioElement>(null);
|
|
const beforeYouStartRef = useRef<HTMLAudioElement>(null);
|
|
const makesItBetterRef = useRef<HTMLAudioElement>(null);
|
|
const fluteRef = useRef<HTMLAudioElement>(null);
|
|
const slowItDownRef = useRef<HTMLAudioElement>(null);
|
|
const bassDrumsRef = useRef<HTMLAudioElement>(null);
|
|
const goodThingsRef = useRef<HTMLAudioElement>(null);
|
|
const betWeDidRef = useRef<HTMLAudioElement>(null);
|
|
const mymyRef = useRef<HTMLAudioElement>(null);
|
|
const rehearsalsRef = useRef<HTMLAudioElement>(null);
|
|
|
|
const getButton = (title: string, ref: RefObject<HTMLAudioElement | null>) => {
|
|
return <button className="border-2 rounded-lg p-4 text-center text-xl font-medium cursor-pointer hover:bg-gray-200 active:bg-blue-200"
|
|
onClick={() =>
|
|
{
|
|
if (ref.current){
|
|
//ref.current.currentTime = 0;
|
|
ref.current?.play()
|
|
}
|
|
}
|
|
}>{title}</button>
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-8">
|
|
{getButton("Boy You Play", boyYouPlayRef)}
|
|
{getButton("Eat It Up", eatItUpRef)}
|
|
{getButton("Gangbusters", gangbustersRef)}
|
|
{getButton("Husky", huskyRef)}
|
|
{getButton("Pretty Flags", prettyFlagsRef)}
|
|
{getButton("Hobbs", hobbsRef)}
|
|
{getButton("Good Looking Band", goodLookingBandRef)}
|
|
{getButton("Pretty Impressive", impressiveRef)}
|
|
{getButton("3 Tall Tubas", tallTubasRef)}
|
|
{getButton("Wild Chart", wildChartRef)}
|
|
{getButton("Scared Me", scaredMeRef)}
|
|
{getButton("Not Bad", notBadRef)}
|
|
{getButton("Strong Tubas", strongTubasRef)}
|
|
{getButton("Tall Band", tallBandRef)}
|
|
{getButton("Beautiful Blue", blueRef)}
|
|
{getButton("Before You Start", beforeYouStartRef)}
|
|
{getButton("Carlsbad", carlsbadRef)}
|
|
{getButton("Makes It Better", makesItBetterRef)}
|
|
{getButton("Flute", fluteRef)}
|
|
{getButton("Bet We Did", betWeDidRef)}
|
|
{getButton("Slow It Down", slowItDownRef)}
|
|
{getButton("Bass Drums", bassDrumsRef)}
|
|
{getButton("Good Things", goodThingsRef)}
|
|
{getButton("My my my", mymyRef)}
|
|
{getButton("Rehearsals", rehearsalsRef)}
|
|
<audio hidden preload="auto" ref={boyYouPlayRef} src="/boyyouplay.m4a"/>
|
|
<audio hidden preload="auto" ref={eatItUpRef} src="/eatitup.m4a"/>
|
|
<audio hidden preload="auto" ref={gangbustersRef} src="/gangbusters.m4a"/>
|
|
<audio hidden preload="auto" ref={huskyRef} src="/husky.m4a"/>
|
|
<audio hidden preload="auto" ref={prettyFlagsRef} src="/prettyflags.m4a"/>
|
|
<audio hidden preload="auto" ref={hobbsRef} src="/hobbs.m4a"/>
|
|
<audio hidden preload="auto" ref={goodLookingBandRef} src="/goodlookingband.m4a"/>
|
|
<audio hidden preload="auto" ref={impressiveRef} src="/impressive.m4a"/>
|
|
<audio hidden preload="auto" ref={tallTubasRef} src="/talltubas.m4a"/>
|
|
<audio hidden preload="auto" ref={wildChartRef} src="/wildchart.m4a"/>
|
|
<audio hidden preload="auto" ref={scaredMeRef} src="/scared.m4a"/>
|
|
<audio hidden preload="auto" ref={notBadRef} src="/notbad.m4a"/>
|
|
<audio hidden preload="auto" ref={strongTubasRef} src="/strongtubas.m4a"/>
|
|
<audio hidden preload="auto" ref={tallBandRef} src="/tallband.m4a"/>
|
|
<audio hidden preload="auto" ref={blueRef} src="/beautifulblue.m4a"/>
|
|
<audio hidden preload="auto" ref={beforeYouStartRef} src="/beforeyoustart.m4a"/>
|
|
<audio hidden preload="auto" ref={carlsbadRef} src="/carlsbad.m4a"/>
|
|
<audio hidden preload="auto" ref={makesItBetterRef} src="/makesitbetter.m4a"/>
|
|
<audio hidden preload="auto" ref={fluteRef} src="/flute.m4a"/>
|
|
<audio hidden preload="auto" ref={betWeDidRef} src="/ibetwedid.m4a"/>
|
|
<audio hidden preload="auto" ref={slowItDownRef} src="/slowitdown.m4a"/>
|
|
<audio hidden preload="auto" ref={bassDrumsRef} src="/bassdrums.m4a"/>
|
|
<audio hidden preload="auto" ref={goodThingsRef} src="/goodthings.m4a"/>
|
|
<audio hidden preload="auto" ref={mymyRef} src="/mymymy.m4a"/>
|
|
<audio hidden preload="auto" ref={rehearsalsRef} src="/rehearsals.m4a"/>
|
|
</div>
|
|
);
|
|
} |