The demo looks awesome! But the code snippets in the README.md and in test.js don't actually work. Could you include a very simple working example? That would be quite helpful.

1. MediaRecorder with timeslice for recording, SourceBuffer→ MediaElement for playback

• presumably fast
• presumably cross-browser
• native-ish

• minimum time slice is limited to ~ .3s or so, playing small slices is impossible (or requires stuffing silence somehow)
• no way to adjust frame → bar correspondance
• hard to debug

Actually mb problem was initial chunk - slicing subsequent parts is fine.

1.1 MediaRecorder, but full blob for playback

Workable solution at react-mic uses media recorder with 10ms slices, creates resulting blob from a bunch of chunks, playback has no preview/edit.

• there's minimal chunk limitation, not as strict as SourceBuffer case
• there is discrepancy of timeslice time returned by recorder in regular intervals and actual intervals... Fixable by real timer or full-file playback
• blocks rearrangement is problematic. According to SimpleBlock opus structure, there is a timestamp in each block, which is (possibly) used for ordering purposes, meaning cutting/pasting blocks is not necessarily going to work, at least it is error-prone (wrong). See reading webm opus. Practically blocks rearrangement works fine, but allows smaller block size than FF, therefore FF has first-block distance apart and a bit more problematic for rearrangement.

Ok, this technique is possible for playback vis, but not editing.

2. web-audio-read for recording, web-audio-write for playback

• not standard way to record audio

• any resolution handling
• the most purposeful method to visualize audio
• extensible, less bugs

• web-audio-stream should provide readable to from app-audio
• app-audio should provide styles
• app-audio download
• app-audio drag-n-drop shit
• urify mattdesl/urify#2 and mattdesl/urify#6 to avoid overusing wavefont

Textarea is simple, but contenteditable allows:

• natural caret position tracking to display menu
• multiple bars combination (channels, frequencies)
• per-bar colorization
• exec commands (?)

• better loudness (too small now):
  • weight by lpf, hpf, bpf to hearable clusters;
  • colorize each group into r/g/b channels (simplified colorization)
• prohibit editing events (editing from keyboard is redundant)
• copy/paste
• dynamic movable play/info/save
• history
• labels (easy to get lost)