Web/ HTML5 Audio Player Written In React

Demo Links

• 🎨 Components
• Player model reference
• 🚧 (WIP) Demo: React Audio Player

About

Having written an audio player in the past, under strict time constraints, I wanted to see if I can make a better one.

I will potentially end up open-sourcing this.

Apologies in advance for the test tracks included. They are tracks I made ~10 years ago.

Testing

Currently vitest with react testing library is set up for unit tests.

# run unit tests

npm test

# run unit tests with coverage

npm run test:coverage

Then Chromatic can be used to do visual regression tests on components.

Note: Because I still need to work out centralised state management from the player -> components. I'm holding off on RTL tests for now as i'd probably just end up having to re-write them.

Designs

Desktop Player

Mobile Player - Slim

Mobile Player - Expanded

Generate Type Docs

  npm run documentation:generate

Runs typedoc against the Player model code.

  npm run documentation:open

Opens docs/typedoc/index.html to see the generated API documentation.

Dependency Choices

Chakra UI - Component Library

Instead of manually creating specific components with all required features as a first pass I've decided to use Chakra UI.

The main benefits of Chakra are significant time-saved. And the ability to handle all of the UI-related requirements without having to install multiple dependencies. Finally, it has rich accessibility features built in.

Chromatic By Storybook - Hosting + Component Explorer

I wanted to try this with figma integration to see how it works.

To deploy you need an .env file at root containing:

CHROMATIC_PROJECT_TOKEN='<project token>'

Then run the script to build and deploy storybook with:

npm run chromatic:deploy

TODO

• API - Create the underlying logic required for a UI to function.
  • Create basic OO class structure for the player.
    • Logical grouping of player elements
    • Add basic tests.
  • Add some api documentation/ TSDOC autogenerate API spec.
    • typedoc
  • Add more error logging to make it more obvious what issues are.
  • UI Designs/ Blueprints to check all required logic exists.
• Repo/ Docs/ Demos/ Publishing
  • Create basic static pages site w/ cd pipeline to host the api documentation, designs & player demo.
  • Add steps to build + deploy the storybook library to the GH pages site.
  • Optimise output to publish to NPM. Potentially also split out player API if users want to create their own GUI's for it.
  • Maybe switch Chakra storybook plugin for custom theme decorator. - Because initially the player is dark mode only & light mode changes colors.
• Frontend
  • Setup/ create theme solution + design tokens.
  • Customizable icon solution.
  • Component designs - Figma
  • Link more component designs to storybook?
  • Components (First pass)
    • Atoms
      • Icon
      • Image *
      • Text *
      • Link *
      • Timestamp
        • Basic component
        • Work out how to subscribe it to duration/ seek times etc
    • Molecules
      • IconButton (w/ Tooltip)
      • Slider
      • Track Details
        • Rework artist -> artists incase there are multiple, with links to their pages.
        • Text roll animation if title/ artist name are too long and go off screen.
          • Will need to calculate visible space + text length
      • Track Controls
        • Playback Controls
        • Seek Bar
      • Player Global Controls
        • Volume Bar
    • Organisms (Player)

* don't think its worth remaking

Wireframes