36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
"use client"
|
|
import { useRef } from 'react';
|
|
|
|
export default function Soundboard() {
|
|
const audioRef = useRef<HTMLAudioElement>(null);
|
|
|
|
const getButton = (title: string, src: string) => {
|
|
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 (audioRef.current) {
|
|
audioRef.current.src = src;
|
|
audioRef.current.play();
|
|
}
|
|
}}>{title}</button>
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 gap-8">
|
|
{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")}
|
|
<audio hidden ref={audioRef} />
|
|
</div>
|
|
);
|
|
} |