Audio

👑Pioneer

TechUI features a built-in lightweight audio management module, audio, designed to provide auditory feedback during user interactions (such as clicks, popups, and warnings) to enhance the user experience.

The system's TuiPanicAlert (Emergency Alarm), TuiAdaptive (Adaptive Control), and all Attention (Message/Notification) components integrate this feature by default. You can also manually invoke these sound effects within your business code.

Basic Usage

Inject the audio object via $global to use it.

import { inject } from 'vue';

const { audio } = inject('$global');

const handleClick = () => {
  // Play click sound
  audio.play('clickA');
};

API Reference

The audio object provides the following three core methods:

Play (play)

Used to trigger an audio clip.

Function Signature: audio.play(name, loop, audioId, delay)

Parameter Description:

Parameter Name	Type	Default	Description
name	String	-	Audio resource name (see Resource List below).
loop	Boolean	false	Whether to loop playback.
audioId	String	null	Custom Audio ID. If not provided, defaults to name. Used to manually stop playback later.
delay	Number	0	Time to delay playback (in milliseconds).

Return Value: Returns a Promise.

• Non-loop mode: Resolves when playback ends.
• Loop mode: Resolves immediately when playback starts.

Example:

// Simple playback
audio.play('successA');

// Play alarm sound in a loop after a 600ms delay, specifying an ID
audio.play('errorC', true, 'my_alarm_id', 600);

Stop (stop)

Stops the audio playback of a specific ID. Typically used to stop looping background sounds.

Function Signature: audio.stop(audioId)

Example:

// Stop the alarm sound created above
audio.stop('my_alarm_id');

Stop All (stopAll)

Immediately stops all currently playing audio streams.

Function Signature: audio.stopAll()

Audio Resource List

TechUI comes pre-installed with 19 high-quality sound effects, covering scenarios such as interactions, notifications, errors, and popups.

Click Feedback (Click)

• clickA
• clickB
• clickC

Prompt/Notification (Dindon & Ping)

• dindonA
• dindonB
• dindonC
• pingA
• pingB
• pingC1
• pingC2
• pingC3

Error/Warning (Error)

• errorA
• errorB
• errorC
• errorD

Popup/Overlay (Popup)

• popupA
• popupB
• popupC
• popupD

Global Control

The audio prompt function is controlled by the global configuration $globalConfig.sound.

• Enabled: When $globalConfig.sound is true, components play sounds normally.
• Muted: When set to false, system components (such as Message, Notification) will automatically mute. However, this will not intercept your manual audio.play() calls (unless you implement a check in your business logic).

You can modify this configuration via the control panel or code:

const { $tState } = inject('$global');

// Globally disable system audio prompts
$tState.globalConfig.sound = false;