提示音
TechUI 内置了一个轻量级的音频管理模块 audio,用于在用户交互(如点击、弹窗、警告)时提供听觉反馈,增强用户体验。
系统中的 TuiPanicAlert(紧急报警)、TuiAdaptive(自适应控制)以及所有的 Attention(消息/通知)组件默认均集成了此功能。您也可以在业务代码中手动调用这些音效。
基础用法
通过 $global 注入 audio 对象即可使用。
javascript
import { inject } from 'vue';
const { audio } = inject('$global');
const handleClick = () => {
// 播放点击音效
audio.play('clickA');
};API 参考
audio 对象提供了以下三个核心方法:
播放 (play)
用于触发一段音频。
函数签名: audio.play(name, loop, audioId, delay)
参数说明:
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name | String | - | 音频资源名称(见下方资源列表)。 |
| loop | Boolean | false | 是否循环播放。 |
| audioId | String | null | 自定义音频 ID。若未提供,默认使用 name。用于后续手动停止播放。 |
| delay | Number | 0 | 延迟播放的时间(毫秒)。 |
返回值: 返回一个 Promise。
- 非循环模式:播放结束时 resolve。
- 循环模式:开始播放时立即 resolve。
示例:
javascript
// 简单播放
audio.play('successA');
// 延迟 600ms 后循环播放报警音,并指定 ID
audio.play('errorC', true, 'my_alarm_id', 600);停止 (stop)
停止指定 ID 的音频播放。通常用于停止循环播放的背景音。
函数签名: audio.stop(audioId)
示例:
javascript
// 停止上面创建的报警音
audio.stop('my_alarm_id');停止所有 (stopAll)
立即停止当前正在播放的所有音频流。
函数签名: audio.stopAll()
音频资源列表
TechUI 预置了 19 种高品质音效,涵盖了交互、通知、错误和弹窗等场景。
点击反馈 (Click)
clickAclickBclickC
提示/通知 (Dindon & Ping)
dindonAdindonBdindonCpingApingBpingC1pingC2pingC3
错误/警告 (Error)
errorAerrorBerrorCerrorD
弹窗/浮层 (Popup)
popupApopupBpopupCpopupD
全局控制
提示音功能受全局配置 $globalConfig.sound 的控制。
- 启用:当
$globalConfig.sound为true时,组件会正常播放声音。 - 静音:当设置为
false时,系统组件(如 Message, Notification)将自动静音,但不会拦截您手动调用audio.play()的行为(除非在业务逻辑中自行判断)。
您可以通过控制面板或代码修改此配置:
javascript
const { $tState } = inject('$global');
// 全局关闭系统提示音
$tState.globalConfig.sound = false;