Repeated "Invalid URI. Load of media resource failed." when recording audio in Firefox leads to browser crash

[mamei16]

Describe the bug

After stopping a microphone recording in Firefox, it seems some JavaScript function is called over and over again indefinitely, each time triggering the error Invalid URI. Load of media resource failed. This leads to excessive CPU usage even when the web UI is idle after recording audio. It appears that after each recording, another asynchronous function starts calling the problematic function, leading to CPU usage increasing further with each recording, until the web UI becomes laggy and Firefox finally crashes.

The logs below show the browser console after recording two audio clips.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import os

import numpy as np

import gradio as gr


def reverse_audio(audio):
    sr, data = audio
    return (sr, np.flipud(data))


input_audio = gr.Audio(
    sources=["microphone"],
    waveform_options=gr.WaveformOptions(
        waveform_color="#01C6FF",
        waveform_progress_color="#0066B4",
        skip_length=2,
        show_controls=False,
    ),
)
demo = gr.Interface(
    fn=reverse_audio,
    inputs=input_audio,
    outputs="audio"
)

if __name__ == "__main__":
    demo.launch()

Screenshot

No response

Logs

Invalid URI. Load of media resource  failed. 4 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 2 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 2 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 439 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 657 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 2 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 2 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 2 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 2 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 2 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 2 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 2 127.0.0.1:7860
Invalid URI. Load of media resource  failed. 1646 127.0.0.1:7860

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.26.0
gradio_client version: 0.15.1

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.3.0
fastapi: 0.110.2
ffmpy: 0.3.2
gradio-client==0.15.1 is not installed.
httpx: 0.27.0
huggingface-hub: 0.22.2
importlib-resources: 6.4.0
jinja2: 3.1.2
markupsafe: 2.1.5
matplotlib: 3.8.4
numpy: 1.26.4
orjson: 3.10.0
packaging: 23.2
pandas: 2.2.2
pillow: 10.3.0
pydantic: 2.7.1
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.4.1
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.11.0
uvicorn: 0.29.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2024.2.0
httpx: 0.27.0
huggingface-hub: 0.22.2
packaging: 23.2
typing-extensions: 4.11.0
websockets: 11.0.3

Severity

Blocking usage of gradio