`gr.Audio` should start from the begining when a new audio is written to the component

用户在 Gradio 应用(使用 `gradio==6.5.1`)中使用 `gr.Audio` 组件播放音频。当一段音频正在播放时,通过点击按钮或其他交互方式将音频源切换为新的音频文件,预期播放器应该从新音频的开头开始播放,但实际上播放器播放的进度位置被保留,导致新音频从中途开始播放。

`gr.Audio` should start from the begining when a new audio is written to the component

`gr.Audio` should start from the begining when a new audio is written to the component

快速结论:此问题发生在 Gradio 中,当 `gr.Audio` 组件正在播放一个音频时,用户操作切换为另一个音频文件,播放器的进度条不会自动跳回到开头,而是停留在上一个音频的播放位置。优先排查是否为 Gradio 6.5.1 版本,并关注该版本中音频组件状态管理的相关逻辑。

问题场景

用户在 Gradio 应用(使用 `gradio==6.5.1`)中使用 `gr.Audio` 组件播放音频。当一段音频正在播放时,通过点击按钮或其他交互方式将音频源切换为新的音频文件,预期播放器应该从新音频的开头开始播放,但实际上播放器播放的进度位置被保留,导致新音频从中途开始播放。

报错原文

when there is an audio playing in the component and then i click on something to change this audio clip with another the player state doesn't default to start from the begining, it stays in where it was before the change of audio.

原因分析

此问题是一个功能缺陷(Bug)。当 `gr.Audio` 组件的音频源数据(value)被更新时,前端播放器(HTML5 Audio 元素)的 `currentTime` 属性没有被重置为 0。这意味着播放器在接收到新的音频 URL 后,仍然使用了上一个音频的 `currentTime` 值来继续播放。这不是配置项问题,而是代码中缺少重置播放位置的操作。

环境排查

  • Gradio 版本:已确认在 gradio==6.5.1 中复现。
  • 浏览器:未指定,但建议在 Chrome / Firefox 最新版本测试。
  • 操作系统:Linux(Issue 报告者所用环境)。
  • 相关依赖:与 Python 版本、PyTorch 等后端无关,属于前端播放器行为。

解决步骤

注意:Issue 已确认并标记为 “bug”,但目前(截至 Issue 关闭日期)尚未在公开版本中合并修复代码。以下为解决该问题的预期方法或可优先尝试的临时方案。

  1. 确认复现:创建一个最小化可复现示例(同上文 Issue 评论中的代码):
import gradio as gr

with gr.Blocks() as demo:
    gr.Audio()
demo.launch()

在页面加载后,手动上传两个不同的音频文件,点击切换,观察播放进度条是否自动归零。

  1. 查找源码修复:在 Gradio 的前端源码中(通常是 gradio/javascript 目录下的音频组件文件,如 Audio.svelte 或相关 TypeScript 逻辑),找到处理音频源更新的逻辑。需要在更新 <audio> 元素的 src 属性的同时,将 currentTime 设置为 0
// 预期修复代码逻辑示例(用于参考,非官方补丁)
// 在音频源变更的 `$: { ... }` 或类似响应式代码块中,添加:
if (newSrc !== oldSrc) {
    audioElement.currentTime = 0;
}
  1. 应用修复:如果您是自己构建 Gradio 环境,可以在本地前端项目中应用上述修复,然后重新构建 Gradio 的 Python 包。但更推荐等待官方发布包含此修复的版本(如 6.5.2 或更高)。
  2. 临时规避方案(如果可行):在切换音频的 Python 回调函数中,增加一个小延迟,先清空音频组件的值,再设置新值。这是一种不太完善的临时方法,可能会引起闪烁。
def switch_audio():
    # 先设置为 None 以重置播放器状态
    yield gr.Audio.update(value=None)
    yield gr.Audio.update(value="new_audio_path.wav")

验证方法

运行包含切换音频逻辑的 Gradio 应用,在播放当前音频时点击切换按钮,观察新加载的音频是否自动从 0 秒开始播放。如果播放进度条显示为 0:00 或音频从开头播放,则问题已解决。

参考来源

gradio-app/gradio #13273

GamsGo AI

AI 工具推荐

想把多个 AI 模型放在一个入口?

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型,适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接:通过此链接购买,我可能获得佣金,不影响你的价格。

celebrityanime
celebrityanime
文章: 13746

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注