1
Introduction to Creating a Custom Accessible Audio Player with React
1m 52s
2
Setup Native Audio and Plan our Audio Player Code
4m 49s
3
Creating a Toggle for Playing and Pausing the Audio
2m 47s
4
Implementing a Duration State
2m 15s
5
Tracking Audio Playback Progress by Adding Elapsed Time
1m 56s
6
Create the Audio Scrubber to Control Playback Position
2m 26s
7
Add Play and Pause Events to the Audio Player
1m 8s
8
Add Fast-Forward and Rewind 15 Second Buttons
2m 51s
9
Creating a Playback Rate Button
1m 43s
10
Creating a Toggle Button for Muting and Unmuting an Audio Element in React
2m 55s
11
Implementing a Volume Range with an onChange Event
4m 42s
12
Design Accessible Buttons Using Icons
4m 37s
13
Using Aria-Label as a Solution for Overly Complex Markup
2m 16s
14
Create a Human Readable Time Formatter
5m 55s
15
Create a Dropdown Menu for Rates
19m 26s
16
Using a forwardRef to Create External Controls
3m 5s

Setup Native Audio and Plan our Audio Player Code

a11y
React

Share this video with your friends

In this lesson we are going to create an AudioPlayer component that takes two props src and transcript, where it returns the audio element and renders the transcript, and we write some pseudo-code for the audio player to reference.

Think about: What do we get for free with common HTML elements?

Setup Native Audio and Plan our Audio Player Code

Share this video with your friends

Course

Create an Accessible Audio Player with the HTML Media Element and React