# Use Start/Stop button to record live audio using Gradio app

**URL:** <https://discuss.huggingface.co/t/use-start-stop-button-to-record-live-audio-using-gradio-app/53313>\
**Category:** 🔒 Gradio\
**Created:** [September 3, 2023, 5:38am UTC](https://discuss.huggingface.co/t/use-start-stop-button-to-record-live-audio-using-gradio-app/53313 "2023-09-03T05:38:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rattanishan](https://avatars.discourse-cdn.com/v4/letter/r/e56c9b/32.png) [@rattanishan](https://discuss.huggingface.co/u/rattanishan)\
**Post date:** [September 3, 2023, 5:38am UTC](https://discuss.huggingface.co/t/use-start-stop-button-to-record-live-audio-using-gradio-app/53313/1 "2023-09-03T05:38:53Z")

</div>

Hi All,

I need help with a problem. I want to add a button in my Gradio app to start/stop audio recording. Basically, what I am trying to do is place a button on the UI. When a user clicks on the this button(let’s say “Speak”), then audio recoding starts and the button text changes to “Stop”. When user clicks on the button again(which now says “Stop”) then audio recording stops.

I want something like this:

 ![1](https://us1.discourse-cdn.com/hellohellohello/original/3X/c/a/cab98ff9b5eb6e3e4e489c53b1ae885c46226ffd.png)

---

<div class="post-metadata">

**Author:** ![rattanishan](https://avatars.discourse-cdn.com/v4/letter/r/e56c9b/32.png) [@rattanishan](https://discuss.huggingface.co/u/rattanishan)\
**Post date:** [September 9, 2023, 8:19pm UTC](https://discuss.huggingface.co/t/use-start-stop-button-to-record-live-audio-using-gradio-app/53313/3 "2023-09-09T20:19:08Z")

</div>

Hi All,

I figured out a solution to this problem. Here is the code, hope it helps!

```auto
import gradio as gr

def click_js():
    return """function audioRecord() {
    var xPathRes = document.evaluate ('//*[@id="audio"]//button', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); 
    xPathRes.singleNodeValue.click();}"""

def action(btn):
    """Changes button text on click"""
    if btn == 'Speak': return 'Stop'
    else: return 'Speak'

def check_btn(btn):
    """Checks for correct button text before invoking transcribe()"""
    if btn != 'Speak': raise Exception('Recording...')

def transcribe():
    return 'Success'

with gr.Blocks() as demo:
    msg = gr.Textbox()
    audio_box = gr.Audio(label="Audio", source="microphone", type="filepath", elem_id='audio')

    with gr.Row():
        audio_btn = gr.Button('Speak')
        clear = gr.Button("Clear")

    audio_btn.click(fn=action, inputs=audio_btn, outputs=audio_btn).\
              then(fn=lambda: None, _js=click_js()).\
              then(fn=check_btn, inputs=audio_btn).\
              success(fn=transcribe, outputs=msg)

    clear.click(lambda: None, None, msg, queue=False)

demo.queue().launch(debug=True)

```

---

<div class="post-metadata">

**Author:** ![rattanishan](https://avatars.discourse-cdn.com/v4/letter/r/e56c9b/32.png) [@rattanishan](https://discuss.huggingface.co/u/rattanishan)\
**Post date:** [November 20, 2023, 5:57am UTC](https://discuss.huggingface.co/t/use-start-stop-button-to-record-live-audio-using-gradio-app/53313/4 "2023-11-20T05:57:16Z")

</div>

For Gradio 4 users:

```auto
import gradio as gr

def click_js():
    return """function audioRecord() {
    var xPathRes = document.evaluate ('//*[contains(@class, "record")]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); 
    xPathRes.singleNodeValue.click();}"""

def action(btn):
    """Changes button text on click"""
    if btn == 'Speak': return 'Stop'
    else: return 'Speak'

def check_btn(btn):
    """Checks for correct button text before invoking transcribe()"""
    if btn != 'Speak': raise Exception('Recording...')

def transcribe():
    return 'Success'

with gr.Blocks() as demo:
    msg = gr.Textbox()
    audio_box = gr.Audio(label="Audio", sources="microphone", type="filepath", elem_id='audio')

    with gr.Row():
        audio_btn = gr.Button('Speak')
        clear = gr.Button("Clear")

    audio_btn.click(fn=action, inputs=audio_btn, outputs=audio_btn).\
              then(fn=lambda: None, js=click_js()).\
              then(fn=check_btn, inputs=audio_btn).\
              success(fn=transcribe, outputs=msg)

    clear.click(lambda: None, None, msg, queue=False)

demo.queue().launch(debug=True)

```