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?
