Implementing a Duration State

[0:00] So the next thing we're going to do is create a duration state. So we're going to set a state as duration and then the setter is set duration and that initial state is going to be zero. Next, let's go to the markup and underneath the button we are going to create two spans. Each of them are going to have their own class name and in the first one we are going to set that class name as lapsed. In the next one we're going to set the class name to duration. Inside the first span we are going to create some sample text and we're going to say elapsed time and we're going to just set that at zero for now. In the duration span we are going to type total time and we are going to render the duration state. Before we do anything to set the duration let's go back to the MDN docs and click on the loaded metadata event. So what it says here is the loaded metadata event is fired when the metadata has been loaded. That doesn't mean much now but let's go back to the app and refresh. When I refresh I want you to keep an eye on the audio element and particularly where the duration is. So you might see for a very brief period it is at zero and then when the metadata is loaded it is 25.58. So to set the duration we have to wait until that metadata is loaded before we can set the duration. So let's create an onloaded metadata function. And then inside that arrow function we are going to set the duration to be audioRef current duration. And then on the audio element we're going to do onloaded metadata and add that function. So now let's go back to our app to refresh. [1:52] You'll see that our total time is about 1500 seconds. So to summarize we created the duration state and set the initial state to zero. Then we created an onloaded metadata function and set the duration to the audioRef.current.duration. Then on the audio element we added the onloaded metadata event and set that to that function.