init repo

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.9
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,8 +1,8 @@
 ---
 title: Test Space
-emoji: 👀
+emoji: 🎶
 colorFrom: indigo
-colorTo: blue
+colorTo: yellow
 sdk: docker
 pinned: false
 ---

app.py

@@ -0,0 +1,3 @@
+from app import main
+
+main.run()

app/demucs_runner.py

@@ -0,0 +1,172 @@
+import argparse
+import sys
+from pathlib import Path
+from typing import List
+
+from dora.log import fatal
+import torch as th
+
+from demucs.apply import apply_model, BagOfModels
+from demucs.audio import save_audio
+from demucs.pretrained import get_model_from_args, ModelLoadingError
+from demucs.separate import load_track
+
+
+def separator(
+    tracks: List[Path],
+    out: Path,
+    model: str,
+    device: str,
+    shifts: int,
+    overlap: float,
+    stem: str,
+    int24: bool,
+    float32: bool,
+    clip_mode: str,
+    mp3: bool,
+    mp3_bitrate: int,
+    jobs: int,
+    verbose: bool,
+):
+    """Separate the sources for the given tracks
+
+    Args:
+        tracks (Path): Path to tracks
+        out (Path): Folder where to put extracted tracks. A subfolder with the model name will be created.
+        model (str): Model name
+        device (str): Device to use, default is cuda if available else cpu
+        shifts (int): Number of random shifts for equivariant stabilization. Increase separation time but improves quality for Demucs. 10 was used in the original paper.
+        overlap (float): Overlap
+        stem (str): Only separate audio into {STEM} and no_{STEM}.
+        int24 (bool): Save wav output as 24 bits wav.
+        float32 (bool): Save wav output as float32 (2x bigger).
+        clip_mode (str): Strategy for avoiding clipping: rescaling entire signal if necessary  (rescale) or hard clipping (clamp).
+        mp3 (bool): Convert the output wavs to mp3.
+        mp3_bitrate (int): Bitrate of converted mp3.
+        jobs (int): Number of jobs. This can increase memory usage but will be much faster when multiple cores are available.
+        verbose (bool): Verbose
+    """
+    args = argparse.Namespace()
+    args.tracks = tracks
+    args.out = out
+    args.model = model
+    args.device = device
+    args.shifts = shifts
+    args.overlap = overlap
+    args.stem = stem
+    args.int24 = int24
+    args.float32 = float32
+    args.clip_mode = clip_mode
+    args.mp3 = mp3
+    args.mp3_bitrate = mp3_bitrate
+    args.jobs = jobs
+    args.verbose = verbose
+    args.filename = "{track}/{stem}.{ext}"
+    args.split = True
+    args.segment = None
+    args.name = model
+    args.repo = None
+
+    try:
+        model = get_model_from_args(args)
+    except ModelLoadingError as error:
+        fatal(error.args[0])
+
+    if args.segment is not None and args.segment < 8:
+        fatal("Segment must greater than 8. ")
+
+    if ".." in args.filename.replace("\\", "/").split("/"):
+        fatal('".." must not appear in filename. ')
+
+    if isinstance(model, BagOfModels):
+        print(
+            f"Selected model is a bag of {len(model.models)} models. "
+            "You will see that many progress bars per track."
+        )
+        if args.segment is not None:
+            for sub in model.models:
+                sub.segment = args.segment
+    else:
+        if args.segment is not None:
+            model.segment = args.segment
+
+    model.cpu()
+    model.eval()
+
+    if args.stem is not None and args.stem not in model.sources:
+        fatal(
+            'error: stem "{stem}" is not in selected model. STEM must be one of {sources}.'.format(
+                stem=args.stem, sources=", ".join(model.sources)
+            )
+        )
+    out = args.out / args.name
+    out.mkdir(parents=True, exist_ok=True)
+    print(f"Separated tracks will be stored in {out.resolve()}")
+    for track in args.tracks:
+        if not track.exists():
+            print(
+                f"File {track} does not exist. If the path contains spaces, "
+                'please try again after surrounding the entire path with quotes "".',
+                file=sys.stderr,
+            )
+            continue
+        print(f"Separating track {track}")
+        wav = load_track(track, model.audio_channels, model.samplerate)
+
+        ref = wav.mean(0)
+        wav = (wav - ref.mean()) / ref.std()
+        sources = apply_model(
+            model,
+            wav[None],
+            device=args.device,
+            shifts=args.shifts,
+            split=args.split,
+            overlap=args.overlap,
+            progress=True,
+            num_workers=args.jobs,
+        )[0]
+        sources = sources * ref.std() + ref.mean()
+
+        if args.mp3:
+            ext = "mp3"
+        else:
+            ext = "wav"
+        kwargs = {
+            "samplerate": model.samplerate,
+            "bitrate": args.mp3_bitrate,
+            "clip": args.clip_mode,
+            "as_float": args.float32,
+            "bits_per_sample": 24 if args.int24 else 16,
+        }
+        if args.stem is None:
+            for source, name in zip(sources, model.sources):
+                stem = out / args.filename.format(
+                    track=track.name.rsplit(".", 1)[0],
+                    trackext=track.name.rsplit(".", 1)[-1],
+                    stem=name,
+                    ext=ext,
+                )
+                stem.parent.mkdir(parents=True, exist_ok=True)
+                save_audio(source, str(stem), **kwargs)
+        else:
+            sources = list(sources)
+            stem = out / args.filename.format(
+                track=track.name.rsplit(".", 1)[0],
+                trackext=track.name.rsplit(".", 1)[-1],
+                stem=args.stem,
+                ext=ext,
+            )
+            stem.parent.mkdir(parents=True, exist_ok=True)
+            save_audio(sources.pop(model.sources.index(args.stem)), str(stem), **kwargs)
+            # Warning : after poping the stem, selected stem is no longer in the list 'sources'
+            other_stem = th.zeros_like(sources[0])
+            for i in sources:
+                other_stem += i
+            stem = out / args.filename.format(
+                track=track.name.rsplit(".", 1)[0],
+                trackext=track.name.rsplit(".", 1)[-1],
+                stem="no_" + args.stem,
+                ext=ext,
+            )
+            stem.parent.mkdir(parents=True, exist_ok=True)
+            save_audio(other_stem, str(stem), **kwargs)

app/main.py

@@ -0,0 +1,168 @@
+import logging
+import os
+from pathlib import Path
+from shutil import rmtree
+
+from pydub import AudioSegment
+import streamlit as st
+
+# from lib.st_custom_components import st_audiorec
+
+# try:
+#     from app.demucs_runner import separator
+# except ImportError:
+#     from demucs_runner import separator
+
+
+logging.basicConfig(
+    format="%(asctime)s %(levelname)-8s %(message)s",
+    level=logging.DEBUG,
+    datefmt="%Y-%m-%d %H:%M:%S",
+)
+
+max_duration = 10  # in seconds
+
+model = "htdemucs"
+extensions = ["mp3", "wav", "ogg", "flac"]  # we will look for all those file types.
+two_stems = None   # only separate one stems from the rest, for instance
+
+# Options for the output audio.
+mp3 = True
+mp3_rate = 320
+float32 = False  # output as float 32 wavs, unsused if 'mp3' is True.
+int24 = False  # output as int24 wavs, unused if 'mp3' is True.
+# You cannot set both `float32 = True` and `int24 = True` !!
+
+
+def find_files(in_path):
+    out = []
+    for file in Path(in_path).iterdir():
+        if file.suffix.lower().lstrip(".") in extensions:
+            out.append(file)
+    return out
+
+out_path = Path("separated")
+in_path = Path("tmp_in")
+
+def clean_folders():
+    if in_path.exists():
+        rmtree(in_path)
+    in_path.mkdir()
+    if out_path.exists():
+        rmtree(out_path)
+    out_path.mkdir()
+    
+def url_is_valid(url):
+    import requests
+    try:
+        r = requests.get(url)
+        r.raise_for_status()
+        return True
+    except Exception:
+        st.error("URL is not valid.")
+
+
+def run():
+    st.markdown("<h1><center>🎶 Music Source Splitter</center></h1>", unsafe_allow_html=True)
+
+    st.markdown("""
+                <style>
+                .st-af {
+                    font-size: 1.5rem;
+                    align-items: center;
+                    padding-right: 2rem;
+                }
+                
+                </style>
+                """,
+                unsafe_allow_html=True,
+    )
+    filename = None
+    choice =  st.radio(label=" ", options=["🔗 From URL", "⬆️ Upload File", "🎤 Record Audio"], horizontal=True)
+    if choice == "🔗 From URL":
+        url = st.text_input("Paste the URL of the audio file", key="url")
+        if url != "":
+            # check if the url is valid
+            if url_is_valid(url):
+                with st.spinner("Downloading audio..."):
+                    clean_folders()
+                    filename = url.split("/")[-1]
+                    os.system(f"wget -O {in_path / filename} {url}")
+            
+    elif choice == "⬆️ Upload File":
+        uploaded_file = st.file_uploader("Choose a file")
+        if uploaded_file is not None:
+            clean_folders()
+            with open(in_path / uploaded_file.name, "wb") as f:
+                f.write(uploaded_file.getbuffer())    
+            filename = uploaded_file.name        
+    elif choice == "🎤 Record Audio":
+        wav_audio_data = st_audiorec()
+        if wav_audio_data is not None:
+            if wav_audio_data != b'RIFF,\x00\x00\x00WAVEfmt \x10\x00\x00\x00\x01\x00\x02\x00\x80>\x00\x00\x00\xfa\x00\x00\x04\x00\x10\x00data\x00\x00\x00\x00':
+                clean_folders()
+                filename = "recording.wav"
+                with open(in_path / filename, "wb") as f:
+                    f.write(wav_audio_data)                
+                
+    if filename is not None:
+        st.markdown("<hr>", unsafe_allow_html=True)
+        cols = st.columns(2)
+        with cols[0]:
+            st.markdown("<h3>Original Audio</h3>", unsafe_allow_html=True)
+        with cols[1]:
+            audio_file = open(in_path / filename, "rb")
+            audio_bytes = audio_file.read()
+            _ = st.audio(audio_bytes)
+        
+        song = AudioSegment.from_file(in_path / filename, filename.split(".")[-1])
+        n_secs = round(len(song) / 1000)
+        start_time = st.slider("Choose the start time", min_value=0, max_value=n_secs, value=0, help=f"Maximum duration is {max_duration} seconds.")
+        end_time = min(start_time + max_duration, n_secs)
+        tot_time = end_time - start_time
+        st.info(f"Audio source will be processed from {start_time} to {end_time} seconds.", icon="⏱")
+         
+        execute = st.button("Split Music 🎶", type="primary")
+        if execute:
+            song = song[start_time*1000:end_time*1000]
+            song.export(in_path / filename, format=filename.split(".")[-1])
+            with st.spinner(f"Splitting source audio, it will take almost {round(tot_time*3.6)} seconds..."):
+                separator(
+                    tracks=[in_path / filename],
+                    out=out_path,
+                    model=model,
+                    device="cpu",
+                    shifts=1,
+                    overlap=0.5,
+                    stem=two_stems,
+                    int24=int24,
+                    float32=float32,
+                    clip_mode="rescale",
+                    mp3=mp3,
+                    mp3_bitrate=mp3_rate,
+                    jobs=os.cpu_count(),
+                    verbose=True,
+                )
+
+            last_dir = ".".join(filename.split(".")[:-1])
+            for file in ["vocals.mp3", "drums.mp3", "bass.mp3", "other.mp3"]:
+                file = out_path / Path(model) / last_dir / file
+                st.markdown("<hr>", unsafe_allow_html=True)
+                cols = st.columns(2)
+                with cols[0]:
+                    label = file.name.split(".")[0].replace("_", " ").capitalize()
+                    # add emoji to label
+                    label = {
+                        "Drums": "🥁",
+                        "Bass": "🎸",
+                        "Other": "🎹",
+                        "Vocals": "🎤",
+                    }.get(label) + " " + label
+                    st.markdown("<h3>" + label + "</h3>", unsafe_allow_html=True)
+                with cols[1]:
+                    audio_file = open(file, "rb")
+                    audio_bytes = audio_file.read()
+                    st.audio(audio_bytes)
+                    
+if __name__ == "__main__":
+    run()

lib/st_audiorec/__init__.py

@@ -0,0 +1 @@
+

lib/st_audiorec/frontend/.env

@@ -0,0 +1,6 @@
+# Run the component's dev server on :3001
+# (The Streamlit dev server already runs on :3000)
+PORT=3001
+
+# Don't automatically open the web browser on `npm run start`.
+BROWSER=none

lib/st_audiorec/frontend/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "trailingComma": "es5"
+}

lib/st_audiorec/frontend/build/asset-manifest.json

@@ -0,0 +1,22 @@
+{
+  "files": {
+    "main.js": "./static/js/main.833ba252.chunk.js",
+    "main.js.map": "./static/js/main.833ba252.chunk.js.map",
+    "runtime-main.js": "./static/js/runtime-main.11ec9aca.js",
+    "runtime-main.js.map": "./static/js/runtime-main.11ec9aca.js.map",
+    "static/css/2.bfbf028b.chunk.css": "./static/css/2.bfbf028b.chunk.css",
+    "static/js/2.270b84d8.chunk.js": "./static/js/2.270b84d8.chunk.js",
+    "static/js/2.270b84d8.chunk.js.map": "./static/js/2.270b84d8.chunk.js.map",
+    "index.html": "./index.html",
+    "precache-manifest.4829c060d313d0b0d13d9af3b0180289.js": "./precache-manifest.4829c060d313d0b0d13d9af3b0180289.js",
+    "service-worker.js": "./service-worker.js",
+    "static/css/2.bfbf028b.chunk.css.map": "./static/css/2.bfbf028b.chunk.css.map",
+    "static/js/2.270b84d8.chunk.js.LICENSE.txt": "./static/js/2.270b84d8.chunk.js.LICENSE.txt"
+  },
+  "entrypoints": [
+    "static/js/runtime-main.11ec9aca.js",
+    "static/css/2.bfbf028b.chunk.css",
+    "static/js/2.270b84d8.chunk.js",
+    "static/js/main.833ba252.chunk.js"
+  ]
+}

lib/st_audiorec/frontend/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><title>Streamlit Audio Recorder Component</title><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Streamlit Audio Recorder Component"/><link rel="stylesheet" href="bootstrap.min.css"/><link rel="stylesheet" href="./styles.css"/><link href="./static/css/2.bfbf028b.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,l,a=t[0],p=t[1],i=t[2],c=0,s=[];c<a.length;c++)l=a[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p[n]);for(f&&f(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var p=r[a];0!==o[p]&&(n=!1)}n&&(u.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},o={1:0},u=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(l.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(r,n,function(t){return e[t]}.bind(null,n));return r},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="./";var a=this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[],p=a.push.bind(a);a.push=t,a=a.slice();for(var i=0;i<a.length;i++)t(a[i]);var f=p;r()}([])</script><script src="./static/js/2.270b84d8.chunk.js"></script><script src="./static/js/main.833ba252.chunk.js"></script></body></html>

lib/st_audiorec/frontend/build/precache-manifest.4829c060d313d0b0d13d9af3b0180289.js

@@ -0,0 +1,26 @@
+self.__precacheManifest = (self.__precacheManifest || []).concat([
+  {
+    "revision": "de27ef444ab2ed520b64cb0c988a478a",
+    "url": "./index.html"
+  },
+  {
+    "revision": "1a47c80c81698454dced",
+    "url": "./static/css/2.bfbf028b.chunk.css"
+  },
+  {
+    "revision": "1a47c80c81698454dced",
+    "url": "./static/js/2.270b84d8.chunk.js"
+  },
+  {
+    "revision": "3fc7fb5bfeeec1534560a2c962e360a7",
+    "url": "./static/js/2.270b84d8.chunk.js.LICENSE.txt"
+  },
+  {
+    "revision": "3478f4c246f37a2cbb97",
+    "url": "./static/js/main.833ba252.chunk.js"
+  },
+  {
+    "revision": "7c26bca7e16783d14d15",
+    "url": "./static/js/runtime-main.11ec9aca.js"
+  }
+]);

lib/st_audiorec/frontend/build/service-worker.js

@@ -0,0 +1,39 @@
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
+
+importScripts(
+  "./precache-manifest.4829c060d313d0b0d13d9af3b0180289.js"
+);
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+workbox.core.clientsClaim();
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("./index.html"), {
+  
+  blacklist: [/^\/_/,/\/[^/?]+\.[^/]+$/],
+});

lib/st_audiorec/frontend/build/static/css/2.bfbf028b.chunk.css

@@ -0,0 +1,2 @@
+._3ybTi{margin:2em;padding:.5em;border:2px solid #000;font-size:2em;text-align:center}
+/*# sourceMappingURL=2.bfbf028b.chunk.css.map */

lib/st_audiorec/frontend/build/static/css/2.bfbf028b.chunk.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.css"],"names":[],"mappings":"AAEA,QACE,UAAW,CACX,YAAc,CACd,qBAAsB,CACtB,aAAc,CACd,iBACF","file":"2.bfbf028b.chunk.css","sourcesContent":["/* add css module styles here (optional) */\n\n._3ybTi {\n  margin: 2em;\n  padding: 0.5em;\n  border: 2px solid #000;\n  font-size: 2em;\n  text-align: center;\n}\n"]}

lib/st_audiorec/frontend/build/static/js/2.270b84d8.chunk.js.LICENSE.txt

@@ -0,0 +1,58 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/**
+ * @license
+ * Copyright 2018-2021 Streamlit Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.14.0
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

lib/st_audiorec/frontend/build/static/js/main.833ba252.chunk.js

@@ -0,0 +1,2 @@
+(this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[]).push([[0],{17:function(t,e,a){t.exports=a(28)},28:function(t,e,a){"use strict";a.r(e);var n=a(6),o=a.n(n),r=a(15),c=a.n(r),i=a(0),l=a(1),s=a(2),u=a(3),d=a(8),p=a(11),m=(a(27),function(t){Object(s.a)(a,t);var e=Object(u.a)(a);function a(){var t;Object(l.a)(this,a);for(var n=arguments.length,r=new Array(n),c=0;c<n;c++)r[c]=arguments[c];return(t=e.call.apply(e,[this].concat(r))).state={isFocused:!1,recordState:null,audioDataURL:"",reset:!1},t.render=function(){var e=t.props.theme,a={},n=t.state.recordState;if(e){var r="1px solid ".concat(t.state.isFocused?e.primaryColor:"gray");a.border=r,a.outline=r}return o.a.createElement("span",null,o.a.createElement("div",null,o.a.createElement("button",{id:"record",onClick:t.onClick_start},"Start Recording"),o.a.createElement("button",{id:"stop",onClick:t.onClick_stop},"Stop"),o.a.createElement("button",{id:"reset",onClick:t.onClick_reset},"Reset"),o.a.createElement("button",{id:"continue",onClick:t.onClick_continue},"Download"),o.a.createElement(p.b,{state:n,onStop:t.onStop_audio,type:"audio/wav",backgroundColor:"rgb(255, 255, 255)",foregroundColor:"rgb(255,76,75)",canvasWidth:450,canvasHeight:100}),o.a.createElement("audio",{id:"audio",controls:!0,src:t.state.audioDataURL})))},t.onClick_start=function(){t.setState({reset:!1,audioDataURL:"",recordState:p.a.START}),d.a.setComponentValue("")},t.onClick_stop=function(){t.setState({reset:!1,recordState:p.a.STOP})},t.onClick_reset=function(){t.setState({reset:!0,audioDataURL:"",recordState:p.a.STOP}),d.a.setComponentValue("")},t.onClick_continue=function(){if(""!==t.state.audioDataURL){var e=(new Date).toLocaleString(),a="streamlit_audio_"+(e=(e=(e=e.replace(" ","")).replace(/_/g,"")).replace(",",""))+".wav",n=document.createElement("a");n.style.display="none",n.href=t.state.audioDataURL,n.download=a,document.body.appendChild(n),n.click()}},t.onStop_audio=function(e){!0===t.state.reset?(t.setState({audioDataURL:""}),d.a.setComponentValue("")):(t.setState({audioDataURL:e.url}),fetch(e.url).then((function(t){return t.blob()})).then((function(t){return new Response(t).arrayBuffer()})).then((function(t){d.a.setComponentValue({arr:new Uint8Array(t)})})))},t}return Object(i.a)(a)}(d.b)),f=Object(d.c)(m);d.a.setComponentReady(),d.a.setFrameHeight(),c.a.render(o.a.createElement(o.a.StrictMode,null,o.a.createElement(f,null)),document.getElementById("root"))}},[[17,1,2]]]);
+//# sourceMappingURL=main.833ba252.chunk.js.map

lib/st_audiorec/frontend/build/static/js/main.833ba252.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["StreamlitAudioRecorder.tsx","index.tsx"],"names":["StAudioRec","state","isFocused","recordState","audioDataURL","reset","render","theme","props","style","borderStyling","primaryColor","border","outline","id","onClick","onClick_start","onClick_stop","onClick_reset","onClick_continue","onStop","onStop_audio","type","backgroundColor","foregroundColor","canvasWidth","canvasHeight","controls","src","setState","RecordState","START","Streamlit","setComponentValue","STOP","datetime","Date","toLocaleString","filename","replace","a","document","createElement","display","href","download","body","appendChild","click","data","url","fetch","then","ctx","blob","Response","arrayBuffer","buffer","Uint8Array","StreamlitComponentBase","withStreamlitConnection","setComponentReady","setFrameHeight","ReactDOM","StrictMode","getElementById"],"mappings":"wQAiBMA,G,kNACGC,MAAQ,CAAEC,WAAW,EAAOC,YAAa,KAAMC,aAAc,GAAIC,OAAO,G,EAExEC,OAAS,WAMd,IAAQC,EAAU,EAAKC,MAAfD,MACFE,EAA6B,GAE3BN,EAAgB,EAAKF,MAArBE,YAGR,GAAII,EAAO,CAGT,IAAMG,EAAa,oBACjB,EAAKT,MAAMC,UAAYK,EAAMI,aAAe,QAC9CF,EAAMG,OAASF,EACfD,EAAMI,QAAUH,EAGlB,OACE,8BACE,6BACE,4BAAQI,GAAG,SAASC,QAAS,EAAKC,eAAlC,mBAGA,4BAAQF,GAAG,OAAOC,QAAS,EAAKE,cAAhC,QAGA,4BAAQH,GAAG,QAAQC,QAAS,EAAKG,eAAjC,SAIA,4BAAQJ,GAAG,WAAWC,QAAS,EAAKI,kBAApC,YAIA,kBAAC,IAAD,CACElB,MAAOE,EACPiB,OAAQ,EAAKC,aACbC,KAAK,YACLC,gBAAgB,qBAChBC,gBAAgB,iBAChBC,YAAa,IACbC,aAAc,MAGhB,2BACEZ,GAAG,QACHa,UAAQ,EACRC,IAAK,EAAK3B,MAAMG,kB,EASlBY,cAAgB,WACtB,EAAKa,SAAS,CACZxB,OAAO,EACPD,aAAc,GACdD,YAAa2B,IAAYC,QAE3BC,IAAUC,kBAAkB,K,EAGtBhB,aAAe,WACrB,EAAKY,SAAS,CACZxB,OAAO,EACPF,YAAa2B,IAAYI,Q,EAIrBhB,cAAgB,WACtB,EAAKW,SAAS,CACZxB,OAAO,EACPD,aAAc,GACdD,YAAa2B,IAAYI,OAE3BF,IAAUC,kBAAkB,K,EAGtBd,iBAAmB,WACzB,GAAgC,KAA5B,EAAKlB,MAAMG,aACf,CAEE,IAAI+B,GAAW,IAAIC,MAAOC,iBAItBC,EAAW,oBADfH,GADAA,GADAA,EAAWA,EAASI,QAAQ,IAAK,KACbA,QAAQ,KAAM,KACdA,QAAQ,IAAK,KACc,OAGzCC,EAAIC,SAASC,cAAc,KACjCF,EAAE/B,MAAMkC,QAAU,OAClBH,EAAEI,KAAO,EAAK3C,MAAMG,aACpBoC,EAAEK,SAAWP,EACbG,SAASK,KAAKC,YAAYP,GAC1BA,EAAEQ,U,EAIE3B,aAAe,SAAC4B,IACG,IAArB,EAAKhD,MAAMI,OAEb,EAAKwB,SAAS,CACZzB,aAAc,KAEhB4B,IAAUC,kBAAkB,MAE5B,EAAKJ,SAAS,CACZzB,aAAc6C,EAAKC,MAGrBC,MAAMF,EAAKC,KAAKE,MAAK,SAASC,GAC5B,OAAOA,EAAIC,UACVF,MAAK,SAASE,GAGf,OAAQ,IAAIC,SAASD,GAAOE,iBAC3BJ,MAAK,SAASK,GACfzB,IAAUC,kBAAkB,CAC1B,IAAO,IAAIyB,WAAWD,U,yBAhIPE,MA8IVC,cAAwB5D,GAIvCgC,IAAU6B,oBAIV7B,IAAU8B,iBCnKVC,IAASzD,OACP,kBAAC,IAAM0D,WAAP,KACE,kBAAC,EAAD,OAEFvB,SAASwB,eAAe,W","file":"static/js/main.833ba252.chunk.js","sourcesContent":["import {\n  Streamlit,\n  StreamlitComponentBase,\n  withStreamlitConnection,\n} from \"streamlit-component-lib\"\nimport React, { ReactNode } from \"react\"\n\nimport AudioReactRecorder, { RecordState } from 'audio-react-recorder'\nimport 'audio-react-recorder/dist/index.css'\n\ninterface State {\n  isFocused: boolean\n  recordState: null\n  audioDataURL: string\n  reset: boolean\n}\n\nclass StAudioRec extends StreamlitComponentBase<State> {\n  public state = { isFocused: false, recordState: null, audioDataURL: '', reset: false}\n\n  public render = (): ReactNode => {\n    // Arguments that are passed to the plugin in Python are accessible\n\n    // Streamlit sends us a theme object via props that we can use to ensure\n    // that our component has visuals that match the active theme in a\n    // streamlit app.\n    const { theme } = this.props\n    const style: React.CSSProperties = {}\n\n    const { recordState } = this.state\n\n    // compatibility with older vers of Streamlit that don't send theme object.\n    if (theme) {\n      // Use the theme object to style our button border. Alternatively, the\n      // theme style is defined in CSS vars.\n      const borderStyling = `1px solid ${\n        this.state.isFocused ? theme.primaryColor : \"gray\"}`\n      style.border = borderStyling\n      style.outline = borderStyling\n    }\n\n    return (\n      <span>\n        <div>\n          <button id='record' onClick={this.onClick_start}>\n            Start Recording\n          </button>\n          <button id='stop' onClick={this.onClick_stop}>\n            Stop\n          </button>\n          <button id='reset' onClick={this.onClick_reset}>\n            Reset\n          </button>\n\n          <button id='continue' onClick={this.onClick_continue}>\n            Download\n          </button>\n\n          <AudioReactRecorder\n            state={recordState}\n            onStop={this.onStop_audio}\n            type='audio/wav'\n            backgroundColor='rgb(255, 255, 255)'\n            foregroundColor='rgb(255,76,75)'\n            canvasWidth={450}\n            canvasHeight={100}\n          />\n\n          <audio\n            id='audio'\n            controls\n            src={this.state.audioDataURL}\n          />\n\n        </div>\n      </span>\n    )\n  }\n\n\n  private onClick_start = () => {\n    this.setState({\n      reset: false,\n      audioDataURL: '',\n      recordState: RecordState.START\n    })\n    Streamlit.setComponentValue('')\n  }\n\n  private onClick_stop = () => {\n    this.setState({\n      reset: false,\n      recordState: RecordState.STOP\n    })\n  }\n\n  private onClick_reset = () => {\n    this.setState({\n      reset: true,\n      audioDataURL: '',\n      recordState: RecordState.STOP\n    })\n    Streamlit.setComponentValue('')\n  }\n\n  private onClick_continue = () => {\n    if (this.state.audioDataURL !== '')\n    {\n      // get datetime string for filename\n      let datetime = new Date().toLocaleString();\n      datetime = datetime.replace(' ', '');\n      datetime = datetime.replace(/_/g, '');\n      datetime = datetime.replace(',', '');\n      var filename = 'streamlit_audio_' + datetime + '.wav';\n\n      // auromatically trigger download\n      const a = document.createElement('a');\n      a.style.display = 'none';\n      a.href = this.state.audioDataURL;\n      a.download = filename;\n      document.body.appendChild(a);\n      a.click();\n    }\n  }\n\n  private onStop_audio = (data) => {\n    if (this.state.reset === true)\n    {\n      this.setState({\n        audioDataURL: ''\n      })\n      Streamlit.setComponentValue('')\n    }else{\n      this.setState({\n        audioDataURL: data.url\n      })\n\n      fetch(data.url).then(function(ctx){\n        return ctx.blob()\n      }).then(function(blob){\n        // converting blob to arrayBuffer, this process step needs to be be improved\n        // this operation's time complexity scales exponentially with audio length\n        return (new Response(blob)).arrayBuffer()\n      }).then(function(buffer){\n        Streamlit.setComponentValue({\n          \"arr\": new Uint8Array(buffer)\n        })\n      })\n\n    }\n\n\n  }\n}\n\n// \"withStreamlitConnection\" is a wrapper function. It bootstraps the\n// connection between your component and the Streamlit app, and handles\n// passing arguments from Python -> Component.\n// You don't need to edit withStreamlitConnection (but you're welcome to!).\nexport default withStreamlitConnection(StAudioRec)\n\n// Tell Streamlit we're ready to start receiving data. We won't get our\n// first RENDER_EVENT until we call this function.\nStreamlit.setComponentReady()\n\n// Finally, tell Streamlit to update our initial height. We omit the\n// `height` parameter here to have it default to our scrollHeight.\nStreamlit.setFrameHeight()\n","import React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport StAudioRec from \"./StreamlitAudioRecorder\"\n\nReactDOM.render(\n  <React.StrictMode>\n    <StAudioRec />\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n)\n"],"sourceRoot":""}

lib/st_audiorec/frontend/build/static/js/runtime-main.11ec9aca.js

@@ -0,0 +1,2 @@
+!function(e){function t(t){for(var n,l,a=t[0],p=t[1],i=t[2],c=0,s=[];c<a.length;c++)l=a[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p[n]);for(f&&f(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var p=r[a];0!==o[p]&&(n=!1)}n&&(u.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},o={1:0},u=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(l.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(r,n,function(t){return e[t]}.bind(null,n));return r},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="./";var a=this.webpackJsonpstreamlit_component_template=this.webpackJsonpstreamlit_component_template||[],p=a.push.bind(a);a.push=t,a=a.slice();for(var i=0;i<a.length;i++)t(a[i]);var f=p;r()}([]);
+//# sourceMappingURL=runtime-main.11ec9aca.js.map

lib/st_audiorec/frontend/build/static/js/runtime-main.11ec9aca.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","1","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","this","oldJsonpFunction","slice"],"mappings":"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","file":"static/js/runtime-main.11ec9aca.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n \tvar jsonpArray = this[\"webpackJsonpstreamlit_component_template\"] = this[\"webpackJsonpstreamlit_component_template\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""}

lib/st_audiorec/frontend/build/styles.css

@@ -0,0 +1,59 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.container{
+    margin: 0 auto;
+    text-align: center;
+}
+
+.display{
+    width: 100%;
+    padding: 5px 0;
+    margin: 15px 0;
+}
+
+.controllers{
+    width: 100%;
+    padding: 5px 0;
+    margin-top: 15px;
+    margin-bottom: 35px;
+}
+
+button{
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+    margin-right: 0.5rem;
+    margin-left: 0.1rem;
+    font-size: 16px;
+    background-color: #ffffff;
+    color: #000000;
+    border: 1px solid rgba(49, 51, 63, 0.2);
+    border-radius: 0.25rem;
+    margin-top: 0.75rem;
+    margin-bottom: 0.25rem;
+}
+
+button:hover{
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+    margin-right: 0.5rem;
+    margin-left: 0.1rem;
+    font-size: 16px;
+    background-color: #ffffff;
+    color: #ff4c4b;
+    border: 1px solid #ff4c4b;
+    border-radius: 0.25rem;
+    margin-top: 0.75rem;
+    margin-bottom: 0.25rem;
+}
+
+audio {
+  width: 450px;
+  height: 45px;
+}

lib/st_audiorec/frontend/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "streamlit_component_template",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "audio-react-recorder": "^1.0.4",
+    "axios": "^0.27.2",
+    "normalize.css": "^8.0.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-media-recorder": "^1.6.4",
+    "react-scripts": "3.4.1",
+    "streamlit-component-lib": "^1.4.0",
+    "turbodepot-node": "^7.0.1",
+    "typescript": "~3.8.0",
+    "use-media-recorder": "^2.0.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "homepage": "."
+}

lib/st_audiorec/frontend/public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Streamlit Audio Recorder Component</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Streamlit Audio Recorder Component" />
+    <link rel="stylesheet" href="bootstrap.min.css" />
+    <link rel="stylesheet" href="./styles.css"/>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- div for root element as generated by the react render function -->
+    <div id="root"></div>
+    <!--
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

lib/st_audiorec/frontend/public/styles.css

@@ -0,0 +1,59 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+.container{
+    margin: 0 auto;
+    text-align: center;
+}
+
+.display{
+    width: 100%;
+    padding: 5px 0;
+    margin: 15px 0;
+}
+
+.controllers{
+    width: 100%;
+    padding: 5px 0;
+    margin-top: 15px;
+    margin-bottom: 35px;
+}
+
+button{
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+    margin-right: 0.5rem;
+    margin-left: 0.1rem;
+    font-size: 16px;
+    background-color: #ffffff;
+    color: #000000;
+    border: 1px solid rgba(49, 51, 63, 0.2);
+    border-radius: 0.25rem;
+    margin-top: 0.75rem;
+    margin-bottom: 0.25rem;
+}
+
+button:hover{
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+    margin-right: 0.5rem;
+    margin-left: 0.1rem;
+    font-size: 16px;
+    background-color: #ffffff;
+    color: #ff4c4b;
+    border: 1px solid #ff4c4b;
+    border-radius: 0.25rem;
+    margin-top: 0.75rem;
+    margin-bottom: 0.25rem;
+}
+
+audio {
+  width: 450px;
+  height: 45px;
+}

lib/st_audiorec/frontend/src/StreamlitAudioRecorder.tsx

@@ -0,0 +1,168 @@
+import {
+  Streamlit,
+  StreamlitComponentBase,
+  withStreamlitConnection,
+} from "streamlit-component-lib"
+import React, { ReactNode } from "react"
+
+import AudioReactRecorder, { RecordState } from 'audio-react-recorder'
+import 'audio-react-recorder/dist/index.css'
+
+interface State {
+  isFocused: boolean
+  recordState: null
+  audioDataURL: string
+  reset: boolean
+}
+
+class StAudioRec extends StreamlitComponentBase<State> {
+  public state = { isFocused: false, recordState: null, audioDataURL: '', reset: false}
+
+  public render = (): ReactNode => {
+    // Arguments that are passed to the plugin in Python are accessible
+
+    // Streamlit sends us a theme object via props that we can use to ensure
+    // that our component has visuals that match the active theme in a
+    // streamlit app.
+    const { theme } = this.props
+    const style: React.CSSProperties = {}
+
+    const { recordState } = this.state
+
+    // compatibility with older vers of Streamlit that don't send theme object.
+    if (theme) {
+      // Use the theme object to style our button border. Alternatively, the
+      // theme style is defined in CSS vars.
+      const borderStyling = `1px solid ${
+        this.state.isFocused ? theme.primaryColor : "gray"}`
+      style.border = borderStyling
+      style.outline = borderStyling
+    }
+
+    return (
+      <span>
+        <div>
+          <button id='record' onClick={this.onClick_start}>
+            Start Recording
+          </button>
+          <button id='stop' onClick={this.onClick_stop}>
+            Stop
+          </button>
+          <button id='reset' onClick={this.onClick_reset}>
+            Reset
+          </button>
+
+          <button id='continue' onClick={this.onClick_continue}>
+            Download
+          </button>
+
+          <AudioReactRecorder
+            state={recordState}
+            onStop={this.onStop_audio}
+            type='audio/wav'
+            backgroundColor='rgb(255, 255, 255)'
+            foregroundColor='rgb(255,76,75)'
+            canvasWidth={450}
+            canvasHeight={100}
+          />
+
+          <audio
+            id='audio'
+            controls
+            src={this.state.audioDataURL}
+          />
+
+        </div>
+      </span>
+    )
+  }
+
+
+  private onClick_start = () => {
+    this.setState({
+      reset: false,
+      audioDataURL: '',
+      recordState: RecordState.START
+    })
+    Streamlit.setComponentValue('')
+  }
+
+  private onClick_stop = () => {
+    this.setState({
+      reset: false,
+      recordState: RecordState.STOP
+    })
+  }
+
+  private onClick_reset = () => {
+    this.setState({
+      reset: true,
+      audioDataURL: '',
+      recordState: RecordState.STOP
+    })
+    Streamlit.setComponentValue('')
+  }
+
+  private onClick_continue = () => {
+    if (this.state.audioDataURL !== '')
+    {
+      // get datetime string for filename
+      let datetime = new Date().toLocaleString();
+      datetime = datetime.replace(' ', '');
+      datetime = datetime.replace(/_/g, '');
+      datetime = datetime.replace(',', '');
+      var filename = 'streamlit_audio_' + datetime + '.wav';
+
+      // auromatically trigger download
+      const a = document.createElement('a');
+      a.style.display = 'none';
+      a.href = this.state.audioDataURL;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+    }
+  }
+
+  private onStop_audio = (data) => {
+    if (this.state.reset === true)
+    {
+      this.setState({
+        audioDataURL: ''
+      })
+      Streamlit.setComponentValue('')
+    }else{
+      this.setState({
+        audioDataURL: data.url
+      })
+
+      fetch(data.url).then(function(ctx){
+        return ctx.blob()
+      }).then(function(blob){
+        // converting blob to arrayBuffer, this process step needs to be be improved
+        // this operation's time complexity scales exponentially with audio length
+        return (new Response(blob)).arrayBuffer()
+      }).then(function(buffer){
+        Streamlit.setComponentValue({
+          "arr": new Uint8Array(buffer)
+        })
+      })
+
+    }
+
+
+  }
+}
+
+// "withStreamlitConnection" is a wrapper function. It bootstraps the
+// connection between your component and the Streamlit app, and handles
+// passing arguments from Python -> Component.
+// You don't need to edit withStreamlitConnection (but you're welcome to!).
+export default withStreamlitConnection(StAudioRec)
+
+// Tell Streamlit we're ready to start receiving data. We won't get our
+// first RENDER_EVENT until we call this function.
+Streamlit.setComponentReady()
+
+// Finally, tell Streamlit to update our initial height. We omit the
+// `height` parameter here to have it default to our scrollHeight.
+Streamlit.setFrameHeight()

lib/st_audiorec/frontend/src/index.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+import ReactDOM from "react-dom"
+import StAudioRec from "./StreamlitAudioRecorder"
+
+ReactDOM.render(
+  <React.StrictMode>
+    <StAudioRec />
+  </React.StrictMode>,
+  document.getElementById("root")
+)

lib/st_audiorec/frontend/src/react-app-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react-scripts" />
+declare module 'audio-react-recorder';

lib/st_audiorec/frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "strictNullChecks":false,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "noImplicitAny": false,
+  },
+  "include": ["src"]
+}

lib/st_custom_components.py

@@ -0,0 +1,33 @@
+import os
+import numpy as np
+import streamlit as st
+from io import BytesIO
+import streamlit.components.v1 as components
+
+def st_audiorec():
+
+    # get parent directory relative to current directory
+    parent_dir = os.path.dirname(os.path.abspath(__file__))
+    # Custom REACT-based component for recording client audio in browser
+    build_dir = os.path.join(parent_dir, "st_audiorec/frontend/build")
+    # specify directory and initialize st_audiorec object functionality
+    st_audiorec = components.declare_component("st_audiorec", path=build_dir)
+
+    # Create an instance of the component: STREAMLIT AUDIO RECORDER
+    raw_audio_data = st_audiorec()  # raw_audio_data: stores all the data returned from the streamlit frontend
+    wav_bytes = None                # wav_bytes: contains the recorded audio in .WAV format after conversion
+
+    # the frontend returns raw audio data in the form of arraybuffer
+    # (this arraybuffer is derived from web-media API WAV-blob data)
+
+    if isinstance(raw_audio_data, dict):  # retrieve audio data
+        with st.spinner('retrieving audio-recording...'):
+            ind, raw_audio_data = zip(*raw_audio_data['arr'].items())
+            ind = np.array(ind, dtype=int)  # convert to np array
+            raw_audio_data = np.array(raw_audio_data)  # convert to np array
+            sorted_ints = raw_audio_data[ind]
+            stream = BytesIO(b"".join([int(v).to_bytes(1, "big") for v in sorted_ints]))
+            # wav_bytes contains audio data in byte format, ready to be processed further
+            wav_bytes = stream.read()
+
+    return wav_bytes

requirements.txt

@@ -0,0 +1,3 @@
+streamlit==1.18.1
+demucs==4.0.0
+pydub==0.25.1