Setup Native Audio and Plan our Audio Player Code
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?
Instructor: [0:00] First, I'm going to create our app using npx create-react-app and egghead-react-a11y-audio-player. Now that that's done, let's go into the directory. Now, I'm going to just type in yarn start and that should start our app up. [0:18] OK. We have the scaffold of our app. First, let's clear out this entire CSS file and let's clear up all that's inside of the header and then let's just add a main element right next to the header. Inside the header tags, we're going to create an h1 and call it Accessible Audio Player.
[0:39] Next, I'm going to create a components folder in the source directory and inside that components folder that we just created, I'm going to create a new file called audio-player.js. First, let's create the component. So const AudioPlayer and then here, we're going to destructure two props, src for source and transcript.
[1:03] Then we're going to return some markup. Let's start with a React fragment, and inside the fragment, we can create an audio element with the source to be that source prop. And then we want to add the controls attribute.
[1:17] Next, let's create a div. Inside that div, we are going to render the transcript prop. At the bottom, we're going to export default AudioPlayer. Great. Now, let's add that back to the app. Import AudioPlayer from components audio-player.
[1:40] Before we add the AudioPlayer to our app, we're going to need a source. I'm just going to store that in a variable for cleanliness. This is just a MP3 from the Egghead podcast.
[1:53] Inside the main tags, I'm going to add the audio-player component and going to set that source to be the source variable that we just set. This is missing a transcript. What I'm just going to do is add an anchor with an HF to the transcript from the Egghead site, and then I'm going to pass that variable into the transcript prop.
[2:15] Now, let's take a look at what that looks like. Nothing special here, just a regular old native audio player. Let's see how we interact with this. First, we press the tab key. Go to the element, press the tab key again, and we're focused on the play button. When I press the space bar, we can trigger the play button.
[2:34] When I press tab again, I'm on the scrubber and when I use my right arrow, you can see I'm fast-forwarding. If I press my left arrow, I'm rewinding. When I press tab again, I'm on the scrubber. When I use my right arrow, you can see I'm fast-forwarding. If I press my left arrow, I'm rewinding.
[2:41] When I tab again, I am on the volume and you can see as I press my left arrow, the volume goes down. When I press my right arrow, the volume goes up. Then on the volume button, if I press it, the space bar, it mutes.
[2:57] Then technically on this one, if I press the space bar, you can download it, but I'm not going to add that to ours because you don't really need to do that right now.
[3:05] Next, I'm going to turn on voiceover so we can see what this sounds like when we use a screen reader.
Automated Voice: [3:12] You are currently on a banner inside of web content. Heading level one, end of banner. Main, you are currently play button, you are currently on a...elapsed time, :33, group, :30, end of elapsed total time/25:58, group/20 end of, total time elapsed time, :33.
Audio time scrubber 0: [3:31] 33/25:58, slider, .87, volume, slider, mute, button. You are currently on a button. To show more media controls button, visited, link, transcript.
Instructor: [3:46] OK, so now that we've gone through this on a screen reader, let's write out some pseudocode before we get started. Based off of what we observe from going through it on a keyboard and screen reader, let's just write out what we need this to do.
[4:02] First, we want to create a play button that toggles play and pause, then we want to create an elapsed time and total time, and we want to create a fast forward and rewind 15-second button. Then we need to create a rime scrubber and then we want to create a playback rate and then we want a volume slider and a mute toggle.
[4:28] To summarize what we did here, we created an audio player component that took in the source and the transcript props. We returned and audio element where we use the source as the source then underneath, we created a div that renders a transcript.
[4:44] Then we wrote some pseudocode of what we're going to be doing in the next few videos.