Chainlit项目中实现音频消息顺序播放的技术方案
2025-05-25 23:45:20作者:伍希望
在开发基于Chainlit的语音聊天应用时,一个常见需求是实现多个音频消息的顺序播放,避免同时播放造成的混乱。本文将详细介绍如何在Chainlit框架中实现这一功能。
问题背景
当语音聊天机器人需要连续播放多个音频片段时,如果简单地设置auto_play
属性为True
,会导致多个音频同时播放,影响用户体验。理想情况下,我们希望音频能够按顺序自动播放,前一个播放完毕后再播放下一个。
解决方案概述
通过自定义JavaScript代码监听音频元素的添加,并实现一个播放队列机制,可以优雅地解决这个问题。核心思路包括:
- 建立一个音频播放队列
- 监听DOM变化,检测新添加的音频元素
- 实现顺序播放逻辑
- 区分用户输入音频和机器人回复音频
详细实现步骤
1. 创建播放队列机制
在public/custom.js
文件中添加以下代码,实现基本的队列管理:
const audioQueue = [];
let isPlaying = false;
const playNextAudio = () => {
if (audioQueue.length > 0) {
const currentAudio = audioQueue.shift();
isPlaying = true;
setTimeout(() => {
currentAudio.play();
currentAudio.addEventListener('ended', () => {
isPlaying = false;
playNextAudio();
});
}, 1000); // 添加1秒延迟确保前一个音频完全停止
}
};
const addAudioToQueue = (audioElement) => {
audioQueue.push(audioElement);
if (!isPlaying) {
playNextAudio();
}
};
2. 监听DOM变化
使用MutationObserver监听页面变化,检测新添加的音频元素:
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
for (const node of mutation.addedNodes) {
checkAndAddAudio(node);
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
3. 音频元素检测与过滤
实现检测函数,识别需要加入队列的音频元素:
const hasInputAudioParagraph = (node) => {
const paragraph = node.querySelector('p.MuiTypography-root.MuiTypography-body1.css-1ihfmjp');
if (paragraph) {
const paragraphText = paragraph.textContent ? paragraph.textContent.trim() : "";
return paragraphText.includes('input_audio');
}
return false;
};
const checkAndAddAudio = (node) => {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node.classList.contains('inline-audio')) {
const audioElement = node.querySelector('audio');
const exclude = hasInputAudioParagraph(node);
if (audioElement && !exclude) {
addAudioToQueue(audioElement);
}
} else {
node.querySelectorAll('.inline-audio').forEach(inlineAudioNode => {
const audioElement = inlineAudioNode.querySelector('audio');
const exclude = hasInputAudioParagraph(inlineAudioNode);
if (audioElement && !exclude) {
addAudioToQueue(audioElement);
}
});
}
}
};
4. 后端配置
在Chainlit后端代码中,确保:
- 发送音频时设置
auto_play=False
- 用户上传的音频文件名包含"input_audio"标识
示例代码:
@cl.on_audio_chunk
async def on_audio_chunk(chunk: cl.AudioChunk):
if chunk.isStart:
buffer = BytesIO()
buffer.name = f"input_audio.{chunk.mimeType.split('/')[1]}"
cl.user_session.set("audio_buffer", buffer)
cl.user_session.set("audio_mime_type", chunk.mimeType)
cl.user_session.get("audio_buffer").write(chunk.data)
技术要点解析
-
MutationObserver API:用于监听DOM树变化,实时捕获新添加的音频元素。
-
播放队列管理:通过数组实现先进先出的队列结构,确保音频按添加顺序播放。
-
音频状态检测:利用
ended
事件监听音频播放完成,触发下一段音频播放。 -
用户音频过滤:通过检测特定文本内容("input_audio")区分用户上传音频和机器人回复音频。
-
播放延迟:添加1秒延迟确保前一个音频完全停止,避免音频重叠。
实际应用建议
-
可根据实际需求调整播放间隔时间(目前设置为1秒)。
-
对于更复杂的场景,可扩展队列管理逻辑,支持优先级播放或插队功能。
-
考虑添加错误处理机制,当某个音频播放失败时自动跳过并播放下一个。
-
对于长时间运行的聊天会话,可添加队列清理机制,防止内存泄漏。
通过这种实现方式,Chainlit应用可以提供更加流畅自然的语音交互体验,特别适合需要连续播放多个语音片段的AI助手类应用场景。
登录后查看全文
热门项目推荐
相关项目推荐
HunyuanImage-3.0
HunyuanImage-3.0 统一多模态理解与生成,基于自回归框架,实现文本生成图像,性能媲美或超越领先闭源模型00- DDeepSeek-V3.2-ExpDeepSeek-V3.2-Exp是DeepSeek推出的实验性模型,基于V3.1-Terminus架构,创新引入DeepSeek Sparse Attention稀疏注意力机制,在保持模型输出质量的同时,大幅提升长文本场景下的训练与推理效率。该模型在MMLU-Pro、GPQA-Diamond等多领域公开基准测试中表现与V3.1-Terminus相当,支持HuggingFace、SGLang、vLLM等多种本地运行方式,开源内核设计便于研究,采用MIT许可证。【此简介由AI生成】Python00
GitCode-文心大模型-智源研究院AI应用开发大赛
GitCode&文心大模型&智源研究院强强联合,发起的AI应用开发大赛;总奖池8W,单人最高可得价值3W奖励。快来参加吧~0369Hunyuan3D-Part
腾讯混元3D-Part00ops-transformer
本项目是CANN提供的transformer类大模型算子库,实现网络在NPU上加速计算。C++095AI内容魔方
AI内容专区,汇集全球AI开源项目,集结模块、可组合的内容,致力于分享、交流。02Spark-Chemistry-X1-13B
科大讯飞星火化学-X1-13B (iFLYTEK Spark Chemistry-X1-13B) 是一款专为化学领域优化的大语言模型。它由星火-X1 (Spark-X1) 基础模型微调而来,在化学知识问答、分子性质预测、化学名称转换和科学推理方面展现出强大的能力,同时保持了强大的通用语言理解与生成能力。Python00GOT-OCR-2.0-hf
阶跃星辰StepFun推出的GOT-OCR-2.0-hf是一款强大的多语言OCR开源模型,支持从普通文档到复杂场景的文字识别。它能精准处理表格、图表、数学公式、几何图形甚至乐谱等特殊内容,输出结果可通过第三方工具渲染成多种格式。模型支持1024×1024高分辨率输入,具备多页批量处理、动态分块识别和交互式区域选择等创新功能,用户可通过坐标或颜色指定识别区域。基于Apache 2.0协议开源,提供Hugging Face演示和完整代码,适用于学术研究到工业应用的广泛场景,为OCR领域带来突破性解决方案。00- HHowToCook程序员在家做饭方法指南。Programmer's guide about how to cook at home (Chinese only).Dockerfile09
- PpathwayPathway is an open framework for high-throughput and low-latency real-time data processing.Python00
项目优选
收起

deepin linux kernel
C
22
6

OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
197
2.17 K

React Native鸿蒙化仓库
C++
208
285

Ascend Extension for PyTorch
Python
59
94

🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
973
574

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台,包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分,采用java语言实现,可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
9
1

本项目是CANN提供的数学类基础计算算子库,实现网络在NPU上加速计算。
C++
549
81

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
1.02 K
399

本项目是CANN开源社区的核心管理仓库,包含社区的治理章程、治理组织、通用操作指引及流程规范等基础信息
393
27

前端智能化场景解决方案UI库,轻松构建你的AI应用,我们将持续完善更新,欢迎你的使用与建议。
官网地址:https://matechat.gitcode.com
1.2 K
133