Saving audio as a file

Anvil Q&A
1

Transcribing the audio works:

What I’m trying to do:
I want to save the audio as an MP3.
I want whatever someone says, to get saved as a MP3 file.

What I’ve tried and what’s not working:
Tried to save the audio as a file. I’m not sure how to do it.

Form 1 Code:

from ._anvil_designer import Form1Template
from anvil import *
import anvil.js.window as window

SpeechRecognition = window.get("SpeechRecognition") or window.get("webkitSpeechRecognition")
SpeechGrammarList = window.get("SpeechGrammarList") or window.get("webkitSpeechGrammarList")
  
class Form1(Form1Template):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    
    recognition = SpeechRecognition()
    recognition.continuous = False
    recognition.lang = 'en-US'
    recognition.interimResults = False
    recognition.maxAlternatives = 1
    
    def on_result(event):
      transcribed_text = event.results[0][0].transcript
      self.hint.text = f"Received: {transcribed_text}"

      
    def on_speech_end(e):
      recognition.stop()
      self.button_1.text = 'Start'
      self.button_1.icon = 'fa:play'
      self.button_1.enabled = True
      
    def on_no_match(e):
      self.hint.text = "I didn't recognise that"
        
    recognition.onresult = on_result
    recognition.onspeechend = on_speech_end
    recognition.onnomatch = on_no_match
    
    self.recognition = recognition

    # Any code you write here will run when the form opens.
   

  def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.recognition.start()
    self.button_1.text = "recording"
    self.button_1.icon = "fa:microphone"
    self.button_1.enabled = False
    self.hint.text = 'ready to receive voice'

Clone link:
https://anvil.works/build#clone:GEYIO4C3KFFH22SW=CUM64JQ2MR2IT3V22GD4YKVV

2

I recognise that code from somewhere :wink:

You can’t get the audio from the SpeechRecognition api.
But you can do it with the MediaStream Recording api alongside the SpeechRecognition api.

Adding the following to the button click

  def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    from anvil.js.window import navigator, MediaRecorder, Blob
    stream = navigator.mediaDevices.getUserMedia({'audio': True})
    recorder = MediaRecorder(stream)
    chunks = []
    recorder.ondataavailable = lambda e: chunks.append(e.data)
    
    def onstop(e):
      anvil_media = anvil.js.to_media(chunks)
      ...
      
    recorder.onstop = onstop
    self.recorder = recorder

And then calling self.recorder.stop() at the same time you stop the speech recognition should work.

EDITED: since original post to reflect new anvi.js api

3

Thank you for the help!

When should I be calling self.recorder.stop?

I started with your app again. Then made the changes. Now it looks like this.

Any assistance would be appreciated. Thank you Stu!

4

That depends when you want the recording to stop.

Do you want it to stop when the SpeechRecognition stops? if yes then call the stop method the same time that the recognition calls it’s stop method.

    def on_speech_end(e):
      recognition.stop()

If you want the user to control the recording then you could make it stop on a button click.

5

Just a ping to say that we’ve recently added a function to anvil.js that can turn the above code into

import anvil.js

    def onstop(e):
        as_anvil_media = anvil.js.to_media(chunks)

useful if you’re working with audio/video from the browser.
It should now be in the auto complete and in the api docs.

1 Like