Real sounds for real interfaces. No synthesis.

import { SoundProvider, useSound, useSoundControls } from "./assets/useSound.jsx";
import { SOUND_MAP, VOLUME_MAP } from "./assets/sounds.inline.js";

function App() {
  return (
    <SoundProvider soundMap={SOUND_MAP} volumeMap={VOLUME_MAP} defaultVolume={0.5}>
      <PayButton />
    </SoundProvider>
  );
}

function PayButton() {
  const click = useSound("click-crisp-primary");
  const success = useSound("success-warm-chime");
  const error = useSound("error-soft-thud");
  return (
    <button onClick={async () => { click(); (await submit()) ? success() : error(); }}>
      Pay now
    </button>
  );
}

function SoundSettings() {
  const { masterVolume, setMasterVolume, muted, toggleMute } = useSoundControls();
  return (
    <>
      <button onClick={toggleMute} aria-pressed={muted}>{muted ? "Unmute" : "Mute"}</button>
      <input type="range" min="0" max="1" step="0.05" value={masterVolume}
             aria-label="Sound volume"
             onChange={(e) => setMasterVolume(Number(e.target.value))} />
    </>
  );
}

import { SoundManager } from "./assets/soundManager.js";
import { SOUND_MAP, VOLUME_MAP } from "./assets/sounds.inline.js";

const sfx = new SoundManager({ sounds: SOUND_MAP, volumes: VOLUME_MAP, volume: 0.5 });

saveBtn.addEventListener("click", () => sfx.play("success-subtle-ping"));
muteBtn.addEventListener("click", () => {
  const muted = sfx.toggleMute();
  muteBtn.setAttribute("aria-pressed", muted);
});
volumeSlider.addEventListener("input", (e) => sfx.setVolume(Number(e.target.value)));