Twilio Flex UI坐席端收到来电时如何播放铃声？

前置准备 #

• 已拥有可正常运行的Twilio Flex实例，且具备Flex UI插件开发权限
• 提前准备好mp3/wav格式的提示音音频文件，单文件大小建议控制在2MB以内

实现步骤 #

步骤1：创建自定义Flex插件 #

在本地开发环境执行命令初始化插件项目：
twilio flex:plugins:create incoming-call-alert-plugin --install
命令执行完成后进入生成的插件目录，后续开发操作均在该目录下完成。

步骤2：注册自定义提示音资源 #

打开插件主入口文件（通常为src/[插件名称].js），引入Sounds模块注册提示音：

你可以选择复用Flex内置提示音，也可以将自定义音频上传至Twilio Assets服务获取可公网访问的音频地址

import { Flex, Sounds } from '@twilio/flex-ui';

// 注册自定义提示音，配置唯一标识、音频地址、播放属性
Sounds.addSound('custom-incoming-call-alert', {
  url: '你的音频资源访问地址',
  repeatable: true,
  volume: 0.8
});

步骤3：绑定新来电事件触发播放逻辑 #

在同一入口文件中添加事件监听逻辑，仅针对语音来电任务触发提示音播放，任务处理完成后自动停止播放：

// 收到新语音来电时播放提示音
Flex.Actions.addListener('beforeAcceptTask', (payload) => {
  if (payload.task.taskChannelUniqueName === 'voice') {
    Sounds.play('custom-incoming-call-alert');
  }
});

// 接听/拒接/结束来电后停止播放提示音
Flex.Actions.addListener(['afterAcceptTask', 'afterRejectTask', 'afterWrapupTask'], () => {
  Sounds.stop('custom-incoming-call-alert');
});

步骤4：本地测试功能 #

执行本地启动命令验证效果：
twilio flex:plugins:start
使用测试号码拨打Flex绑定的呼入号码，确认坐席端收到来电时自动播放提示音，接听/拒接后提示音自动停止。

步骤5：部署插件到生产环境 #

测试无误后执行部署命令发布插件到正式Flex实例：
twilio flex:plugins:deploy --major --changelog "新增新来电自动播放提示音功能" --description "新来电提示音插件"

注意事项 #

• 部分浏览器默认禁用站点自动播放音频，需提前确认坐席端浏览器已开放Flex站点的音频播放权限
• 无需额外注册自定义提示音的场景下，可直接修改Flex内置的incoming提示音参数实现效果

内容的提问来源于stack exchange，提问作者Rahul Mistry