Audio player machine

[leonardomso]

I'm creating a finite state machine for handling the audio player component of the new version of Podhouse and I'd like to contribute to this project.

Here's the link for the visualizer of the Audio player machine

There's a lot of space for improvement here but so far I think this is a good starter.

I few ideas as next steps for this state machine:

• Use the Web Audio API and set the audio element on context.
• Set the properties such as volume, rate, seek (this one might be complex), mute, and loop on context.

[mattpocock]

Very nice! Would certainly accept a PR on this, we can work on it together in the PR if you like. Any questions before you get started?

[leonardomso]

I'll open a PR then and we can start from there. I'd love to receive some feedback about the machine and improve it to be the most reliable possible.

When I created it I was imagining an audio control machine. I don't know if we can make this same machine a video control machine as well.

Anyway, I'll open the PR and start to work on it as soon as possible so we can add this new machine to the project.

[mattpocock]

They're likely to be nearly identical - except for some other controls videos may have like subtitle settings, quality controls etc. But playing/pausing/seeking etc should be identical

[tomByrer]

I'm wondering if there should be a meta-player, where common things like 'playing/pausing/seeking' are in 1 machine, & the other machines call that? Or said meta-player is an actor? Not only there is audio & video, but slideshows, animation, etc.

[mattpocock]

Let's not focus on the abstraction layer for this - let's focus on directly tying the state machine to the implementation. It makes for a better learning resource that way.

[tomByrer]

I'd love to receive some feedback about the machine

I came here looking to 'borrow' a video machine ;)
Off the top of my head:

• Almost all video players have a Pause/Play only button, no stop. I don't think you need a literal stop since you have it implied via loading & ended. Examples of stop could help me understand the need for one...
• Play/Pause def needs a debouncer. Unsure about other states.

How feature-rich do you intend this to be? I think parallel or actor machines to handle a seek bar, volume control, speed, captions, etc would be a good idea. In the end they should be modular or easy to un-include, since not all players have all features.

[tomByrer]

A true media player has many sub-parts. Here is the volume machine:
https://xstate.js.org/viz/?gist=e06674b4cfc3123c58848cafb4a9bf68

• does not include GUI-specific things like if the volume control hide/show
• assumes machine will read/update the HTML media element directly, so needs a bit of editing for name said element ref
• are preferences to be baked inside the machine or loaded in from outside?