marchingmaestro/doyle
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more audio improvements

Browse Source
This commit is contained in:
Drew Roberts
2025-09-24 14:28:26 -04:00
parent cf51e857f8
commit 06c4cc1b11
1 changed files with 46 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Soundboard/index.tsx
+46 -24
View File
@@ -1,36 +1,58 @@
"use client" "use client"
import { useRef } from 'react'; import { RefObject, useRef } from 'react';
export default function Soundboard() { export default function Soundboard() {
const audioRef = useRef<HTMLAudioElement>(null); 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 getButton = (title: string, src: string) => { 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" 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={() => { onClick={() => ref.current?.play()}>{title}</button>
if (audioRef.current) {
audioRef.current.src = src;
audioRef.current.play();
}
}}>{title}</button>
} }
return ( return (
<div className="grid grid-cols-2 gap-8"> <div className="grid grid-cols-2 gap-8">
{getButton("Boy you play!", "/boyyouplay.m4a")} {getButton("Boy you play!", boyYouPlayRef)}
{getButton("Eat It Up!", "/eatitup.m4a")} {getButton("Eat It Up!", eatItUpRef)}
{getButton("Gangbusters", "/gangbusters.m4a")} {getButton("Gangbusters", gangbustersRef)}
{getButton("Husky", "/husky.m4a")} {getButton("Husky", huskyRef)}
{getButton("Pretty Flags", "/prettyflags.m4a")} {getButton("Pretty Flags", prettyFlagsRef)}
{getButton("Hobbs", "/hobbs.m4a")} {getButton("Hobbs", hobbsRef)}
{getButton("Good Looking Band", "/goodlookingband.m4a")} {getButton("Good Looking Band", goodLookingBandRef)}
{getButton("Pretty Impressive", "/impressive.m4a")} {getButton("Pretty Impressive", impressiveRef)}
{getButton("3 Tall Tubas", "/talltubas.m4a")} {getButton("3 Tall Tubas", tallTubasRef)}
{getButton("Wild Chart", "/wildchart.m4a")} {getButton("Wild Chart", wildChartRef)}
{getButton("Scared Me", "/scared.m4a")} {getButton("Scared Me", scaredMeRef)}
{getButton("Not Bad", "/notbad.m4a")} {getButton("Not Bad", notBadRef)}
{getButton("Strong Tubas", "/strongtubas.m4a")} {getButton("Strong Tubas", strongTubasRef)}
{getButton("Tall Band", "/tallband.m4a")} {getButton("Tall Band", tallBandRef)}
<audio hidden ref={audioRef} />
<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"/>
</div> </div>
); );
} }