A music player.
- Components
WavePlayer
- Styles
- Update colors and hover effects
- Add styles for
active
state
- Streamline audio src loading for quicker initial playback
Controls
- Make audio controls more responsive
- Styles
WavePlayerStack
- Work on styles
- Add
title
prop & UI
- Design and build
Config
UX/UI- Add
ConfigButton
component toWavePlayer
andWavePlayerStack
- Add
Config
component- List
tracks
config - Edit
tracks
config- Add
TracksForm
component for editingtracks
config
- Add
- List
- Add
- Config
tracks
- Generalize
tracks
config setting and loading mechanisms- Create UX/UI for setting and updating
tracks
config - Figure out
tracks
config storage
- Create UX/UI for setting and updating
- Update my
tracks
demo config audio src permissions (in AWS) so they work in deployed demo
- Generalize
- Context
- Assess if
WavePlayerContext
is needed - Update
StackContext
as needed- Rename to
WavePlayerStackContext
- Rename to
- Assess if
- Accessibility
- Add keyboard controls to
Controls
component - Add tab key support
- Add aria-labels as needed
- Add keyboard controls to
- Testing
WavePlayer
- Audio (
audioRef
) initialization- Ensure audio is successfully loaded from
currentTrack.src
- Ensure
audioInitialized
is set totrue
- Ensure audio is successfully loaded from
- Audio (
WavePlayerStack
- Ensure only one
WavePlayer
is playing at a time (activePlayerId
inWavePlayerStackContext
)
- Ensure only one
- Packaging
- Identify exports
WavePlayer
WavePlayerStack
- Track config functions
- Types
- Identify exports
- Shipping
- Deploy demo to Vercel