(defn tone-sketch
  [{:keys [sketch]}]
  [h/js-loader {:scripts {#(and (exists? js/Tone))
                          (str "https://cdnjs.cloudflare.com/ajax/libs/tone/14.5.40/Tone.js")}
                :loading [:div "Loading..."]
                :loaded  [:div sketch]}])

(defn sketch
  []
  (let [synth (.toMaster (.chain (new js/Tone.Synth)))
        play (fn [i]
               (.triggerAttackRelease synth i "8n"))]
    [:div

     [:div.pa5
      (for [i ["c4" "d4" "e4" "f4" "g4" "a4" "b4b" "c5"]]
        [ant/button {:on-mouse-down #(play i)} i]
        )]]))

(defn sketch-2
  []
  (let [synth (.toMaster (.chain (new js/Tone.Synth)))
        play (fn [i]
               (.triggerAttackRelease synth i "8n"))]
    [:div
     [:div.pa5
      (for [i ["c2" "d2" "e2" "f2" "g2" "a2" "b2b" "c2"]]
        [ant/button {:on-mouse-down #(play i)} i]
        )]]))

[:div 
      [:p "Example of loading a js library using js-loader."]
 [tone-sketch {:sketch [sketch]}]
 [tone-sketch {:sketch [sketch-2]}]]