Audio Button

The Audio Button component enables triggerable interface sounds on user interaction. It allows you to configure click sound effects declaratively using HTML5 attributes, or execute playback dynamically in Javascript.

<!-- Simple audio button -->
<button class="btn" data-role="audio-button" data-audio-src="sounds/click.mp3">
    Click Me
</button>

<!-- Audio button with custom volume -->
<button class="btn success" data-role="audio-button"
        data-audio-src="sounds/success.mp3"
        data-audio-volume="0.8">
    Success
</button>

<!-- Play sound via JavaScript event -->
<button class="btn primary" onclick="FrankUI.playSound('sounds/notification.mp3', 0.5)">
    Notification
</button>

Markup & Configuration

Add data-role="audio-button" to any button or click target.
Use data-audio-src to specify the path to your audio asset (e.g. .mp3, .wav, .ogg).
Specify data-audio-volume as a decimal value between 0.0 (silent) and 1.0 (maximum volume). Defaults to 1.0.

Procedural Audio Fallback

To support rapid developer testing or offline use without local file assets, the audio engine automatically intercepts requests to standard sound paths and plays pleasant Web Audio API synthesized tones:

sounds/click.mp3: Synthesizes a high-pitched click tick.
sounds/success.mp3: Synthesizes a happy ascending C-major arpeggio.
sounds/notification.mp3: Synthesizes a clean dual-chime notification chord.

JavaScript API

You can play sounds programmatically at any time inside your scripts:

// Play a sound effect at full volume
FrankUI.playSound("sounds/notification.mp3");

// Play a sound effect with 50% volume
FrankUI.playSound("sounds/click.mp3", 0.5);

// AudioButton API alias compatibility
AudioButton.playSound("sounds/notification.mp3");