Top bar audio widgets

[benbovy]

Add a minimal version of what we usually see in DAWs, e.g., like this Ableton Live screenshot

• Main audio context:

  • basic stereo vu-meter for the destination (speaker) node (in-progress)
  • clickable speaker icon to mute the destination (and/or context with a volume slider widget), where the icon aspect reflects to the mute state 🔇 🔈.

• Tone.js Transport timeline:

  • start / stop / pause buttons
  • "reset" button (cancel all scheduled transport events)
  • editable text input for the current position (disable editing it when playing), maybe with a setting or another UI element to switch between different formats (e.g., bars, absolute time, etc.)
  • editable text (number) input for the tempo
  • editable text input for the beat signature
  • maybe display and/or control other transport properties (loop, etc.) as long as the audio widgets on the top bar are kept compact.

It is better to keep to the top bar clean with a minimal set of widgets. More timeline widgets can be added in a side panel.