Decouple AudioController from audio in favour of headless Audio

[dhruvkb]

Problem

New features in audio would require the AudioTrack component to be rendered and unrendered as per the circumstances. Also for a responsive experience, the player would need to switch between several different layouts, which can cause a re-render. With the current setup where the <audio> element is a part of the component, the playback would be interrupted when the component is re-rendered.

Description

Decoupling <audio> from the AudioController would allow the playback to continue uninterrupted in the background while the view in the foreground goes through its lifecycle events. Replacing each individual audio player element with a unified Audio object in the store would be helpful for uninterrupted playback.

Alternatives

I can't think of any alternatives.

Additional context

Using a common object would cause issues as information that was previously held in the <audio> element such as duration and current time would need to be stored separately.

Implementation

• 🙋 I would be interested in implementing this feature.