Skip to content

Get AudioRecorder data from web #5858

@ljouhault

Description

@ljouhault

Hello, i've been using AudioRecorder for a while and i'm trying to make it work on web. However, audio_recorder.stop_recording() returns a blob adress that is only accessible from the user's browser, and as far as i know, there is no documented way to upload it to the backend like you do with file_picker (and no, using file_picker on the blob doesn't work either).

Is there anywhere a code sample that demonstrate how to record audio from a web page and retrieve the data on the backend ? I'm open to stable or latest, if either one can do this.

For the record here is what i tried

    def on_upload(e: ft.FilePickerUploadEvent):
        if e.progress != 1.0:
            return
        server_path = os.path.join(upload_dir, e.file_name)
        process_audio(server_path)

    def toggle_recording(e):
        if not audio_rec.is_recording():
            record_button.text = "Stop Recording"
            record_button.icon = ft.Icons.STOP
            record_button.bgcolor = ft.Colors.RED_400
            audio_rec.start_recording(record_path)
        else:
            record_button.text = "Start Recording"
            record_button.icon = ft.Icons.MIC
            record_button.bgcolor = ft.Colors.BLUE_400
            output_path = audio_rec.stop_recording()
            if output_path.startswith("blob:"):
                filename = "recording.wav"
                file = ft.FilePickerUploadFile(
                            output_path,
                            upload_url=page.get_upload_url(filename, 600)
                        )
                file_picker.upload([file])
            else:
                process_audio(output_path)
        record_button.update()

But on_upload is never called (despite working file when using the file_picker like intended)

Metadata

Metadata

Assignees

Labels

feature requestSuggestion/Request for additional feature

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions