Upload an audio file generated with JS to the server

I have an audio file which is generated by a JS script integrated to my streamlit web-app with components.html, like this:

components.html(
                """
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Document</title>
                </head>
                <body>
                    <!-- Set up your HTML here -->
                    <center>
                        <p><button id="record">Record</button></p>
                        <div id="sound-clip"></div>
                    </center>
                    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
                        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
                    <script>
                        // Set up the AudioContext.
                        const audioCtx = new AudioContext();

                        // Top-level variable keeps track of whether we are recording or not.
                        let recording = false;

                        // Ask user for access to the microphone.
                        if (navigator.mediaDevices) {
                            navigator.mediaDevices.getUserMedia({ "audio": true }).then((stream) => {

                                // Instantiate the media recorder.
                                const mediaRecorder = new MediaRecorder(stream);

                                // Create a buffer to store the incoming data.
                                let chunks = [];
                                mediaRecorder.ondataavailable = (event) => {
                                    chunks.push(event.data);
                                }

                                // When you stop the recorder, create a empty audio clip.
                                mediaRecorder.onstop = (event) => {
                                    const audio = new Audio();
                                    audio.setAttribute("controls", "");
                                    $("#sound-clip").append(audio);
                                    $("#sound-clip").append("<br />");

                                    // Combine the audio chunks into a blob, then point the empty audio clip to that blob.
                                    const blob = new Blob(chunks, { "type": "audio/wav; codecs=0" });
                                    audio.src = window.URL.createObjectURL(blob);

                                    // Clear the `chunks` buffer so that you can record again.
                                    chunks = [];
                                };

                                mediaRecorder.start();
                                recording = true;
                                $("#record").html("Stop");

                                // Set up event handler for the "Record" button.
                                $("#record").on("click", () => {
                                    if (recording) {
                                        mediaRecorder.stop();
                                        recording = false;
                                        $("#record").html("Record");
                                    } else {
                                        $("#record").html("Stop");
                                    }
                                });

                            }).catch((err) => {
                                // Throw alert when the browser is unable to access the microphone.
                                alert("Oh no! Your browser cannot access your computer's microphone.");
                            });
                        } else {
                            // Throw alert when the browser cannot access any media devices.
                            alert("Oh no! Your browser cannot access your computer's microphone. Please update your browser.");
                        }
                    </script>
                </body>
                </html>
            """
            )

This JS code basically records the user’s microphone via the browser and stores the file inside a Blob.
Is it possible to save the file generated by Blob() to a directory so that I can use it inside my Python script?

Hi @ettorecarlessi,

You should be able to upload the file to a GitHub repo via GitHub’s API. Alternatively, you could upload the file to a database like S3 – check out boto3 for this.

Caroline :balloon: