sclass WaveSurfer {
  S randomID = randomIDForPageElement();
  S id = "wavesurfer-" + randomID; // id of container element
  S containerSelector;
  S varName = "waveSurfer_" + randomID; // name of variable for wavesurfer instance
  new MapSO options;
  S audioURL;
  
  S headStuff() {
    ret hscript("https://unpkg.com/wavesurfer.js");
  }
  
  S container() {
    ret emptydiv(+id);
  }
  
  S js_init() {
    if (empty(containerSelector)) containerSelector = "#" + id;
    options.put(container := containerSelector);
    
    ret jsDollarVars([[
      var $waveSurfer = WaveSurfer.create($options);
    ]], +options, waveSurfer := JS(varName));
  }
  
  S js_loadAudio(S url) {
    ret jsDollarVars([[
      $waveSurfer.load($url);
    ]], +url, waveSurfer := JS(varName));
  }
  
  S completeHTML(S audioURL) {
    ret linesLL(
      headStuff(),
      container(),
      hjs(linesLL(js_init(), js_loadAudio(audioURL)))
    );
  }
  
  S js_playPause() {
    ret jsDollarVars([[
      $waveSurfer.playPause();
    ]], waveSurfer := JS(varName));
  }
}