Expose option to allow/forbid users to edit audio

[Bengt]

• [x] I have searched to see if a similar issue already exists.

Related problem

I want to parse information from the audio file name, as that is common practice in the domain I am writing my app for. When users edit an audio file added in gradio's audio element, parsing breaks because the file now has a temporary file name like so:

/tmp/gradio/e0e507a69b71e1e5cc9d7b83d9b16435abb4caf7/audio-1-100.wav

Solution I'd like

Expose an option to disable the file editing feature of gradio's audio element. E.g.

audio: gradio.Audio = gradio.Audio(
    editable=False,
)

Currently, interactive=True means both that users can upload and that users can edit, while I want to have my users upload, but not edit. I would suppose to distinguish between these two:

Source: https://www.gradio.app/docs/audio

Additional context

I am parsing the date and time of a recording audio from its file name. So, another solution that would work for me would be to name the temporary files similarly to the uploaded file names, e.g.:

/tmp/gradio/e0e507a69b71e1e5cc9d7b83d9b16435abb4caf7/Prefix_2023-08-08-08T15-27-57-1-100.wav

[Bengt]

For the time being, this CSS hides the slider element so that users can no longer edit any audio files, which is fine in my case:

div.rangeSlider.range.hoverable {
    display: none;
}

Unfortunately, I cannot get rid of the edit button since its identifier is provided by svelte:

[Bengt]

Hello @hannahblair! Thanks for taking this on. I am glad there is an easy fix for this, but I would not have known how to implement it in this project.

[hannahblair]

My pleasure @Bengt! 🙂

[Bengt]

Thanks for the quick turnaround! This change is already live in my automatically deployed BirdNET application on Hugging Face:

https://huggingface.co/spaces/XPRIZE-Brazilian-Team/Bengt-BirdNET-Annotator

[thiswillbeyourgithub]

Unfortunately this feature was removed in version 4.0+ I think. Too bad.

[hannahblair]

@thiswillbeyourgithub I don't think we meant to remove this. Let me take a look!

[thiswillbeyourgithub]

Thanks @hannahblair a

For anyone else wondering, here's my js workaround to hide some stuff: (be careful of #6729)

import gradio as gr
hide_some_components = """
() => {
const hideElements = (selector) => {
  const elements = document.querySelectorAll(selector);
  elements.forEach(el => {
    el.style.setProperty('display', 'none', 'important');
  });
}
hideElements('#MYNAME > div.component-wrapper.svelte-7hmw24 > div.controls.svelte-nq0yvd > select');
hideElements('#MYNAME > div.component-wrapper.svelte-1n70sxb > div.controls.svelte-t8ovdf > div.control-wrapper.svelte-t8ovdf')
hideElements('#MYNAME > div.component-wrapper.svelte-1n70sxb > div.controls.svelte-t8ovdf > div.settings-wrapper.svelte-t8ovdf')
}
"""

with gr.Blocks() as demo:
    audio = gr.Microphone(elem_id="MYNAME", elem_classes="MYNAME")
    b = gr.Button()
    b.click(fn=None, js=hide_some_components)

demo.launch()

If anyone has an idea of how I could avoid this code breaking when the "svelte-t8ovdf" changes I'm all ears :)

edit: actually my js code was rubbish and I can do this with css only:

css = """
/* remove source selector */
#myaudio > div.component-wrapper > div.controls > select {display: none !important; flex-grow:0 !important;}

/* remove volume and speed controls */
#myaudio > div.component-wrapper > div.controls > div.control-wrapper {display: none !important; flex-grow:0 !important;}

/* remove clipping controls
#myaudio > div.component-wrapper > div.controls > div.settings-wrapper {display: none !important; flex-grow:0 !important;}
*/
"""