Clojurians Log v2

I've created a minimal example, based on MDN's MediaStream Recording API: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API

(ns web-audio.app.core
  (:require [reagent.core :as r]
            [reagent.dom :as rdom]))

(defn log [x]
  (.log js/console x))

(defonce chunks (r/atom []))

(defn app []
  (let [nav (.-mediaDevices js/navigator)
        gum (.-getUserMedia nav)
        cs  (clj->js {:audio true})
        rec-ref (atom nil)
        stp-ref (atom nil)
        _ (if gum
            (-> (.getUserMedia nav cs)
                (.then (fn [stream]
                         (let [mr (js/MediaRecorder. stream)
                               rh #(do (.start mr)
                                       (log (.-state mr))
                                       (log "recorder started"))
                               sh #(do (.stop mr)
                                       (log (.-state mr))
                                       (log "recorder stopped"))
                               stop-mr (fn []
                                         (let [aud (.createElement js/document "audio")
                                               _ (.setAttribute aud "controls" "")
                                               _ (set! (.-controls aud) true)
                                               _ (.appendChild (.-body js/document) aud)
                                               attr (clj->js {"type" "audio/ogg; codecs=opus"})
                                               blob (js/Blob. @chunks attr)
                                               audio-url (.createObjectURL (.-URL js/window) blob)]
                                           (log "media recorder stopped")
                                           (reset! chunks [])
                                           (set! (.-src aud) audio-url)))
                               _ (set! (.-ondataavailable mr)
                                       (fn [e]
                                         (swap! chunks conj (.-data e))))]
                           (set! (.-onclick @rec-ref) rh)
                           (set! (.-onclick @stp-ref) sh)
                           (set! (.-onstop mr) stop-mr))))
                (.catch (fn [err] (log err))))
            (log "getUserMedia not supported on your browser!"))]
    (fn []
      [:div
       [:h1 "Web Audio Recording"]
       [:button {:ref #(reset! rec-ref %)} "Record"]
       [:button {:ref #(reset! stp-ref %)} "Stop"]])))

(defn render []
  (rdom/render [app] (.getElementById js/document "root")))

(defn ^:export main []
  (render))

(defn ^:dev/after-load reload! []
  (render))

@sova From the example above, it's just a lot of JS interop, setting up a few event listeners manually (ie. not via React) since they need to be embedded in the Promise returned by getUserMedia. You may find it simpler to use a library such as https://github.com/closeio/mic-recorder-to-mp3 , which I've used before and like.

@tom.bowden @tkjone thanks!