Make play/stop buttons toggle
Currently, the play/stop buttons are both present and clickable whether audio is playing or not. It's not possible to visually tell whether playback is occuring, which is frustrating when your audio contains long periods of silence.
This change makes it so only one button is visible at a time. When playback starts, the play button gets replaced by the stop button, so the user doesn't need to move their mouse to stop playback. This also provides a clear visual indication for whether audio is playing.
I think it's a little bit weird to hide/show the buttons entirely, I would prefer either:
- Having a single button, which plays or stops depending on the current state (and can have its text updated to indicate this)
- Keeping both buttons, but using the
disabledattribute instead of hiding it entirely (perhaps while the sound is playing, the "Play" button could be disabled and have its text updated to "Playing..." or something like that)
Keeping both buttons visible and disabling either one is something that I experimented with. Changing the play button's text to something like "Playing" during playback changes the width of the play button and can throw off one's cursor navigation while trying to get to the stop button. The problem of having to move your mouse between buttons remains.
Merging both buttons into one toggle button would achieve the same visual result. Both ideas fix the issue of being able to tell whether audio is playing. The question is: should the play/stop functionality be a toggle button, or a switch?