How to Build a Custom Audio Player in React

In this video, Amy builds a custom audio player in React from scratch. This is the same audio player that you’ll see on the website () -- a podcast all about web design and development. 0:00 Introduction 1:43 Looking at the Design 2:23 Starting with 4:29 Brief Explanation of folder structure 5:40 Stubbing out our page 6:24 Styling within 7:03 Explanation of box-sizing: border-box 8:42 Setting up our Audio Component 10:53 Explaining the audio element and what elements HTML gives and what we have access to via JavaScript 12:06 Explaining the DOM 14:08 Stubbing out all the elements that our Audio Component needs 15:36 Setting up our styles for our audio player 16:31 Using Icons for forward, backward, play, and pause 19:01 Setting up the play / pause toggle 21:43 Styling the buttons within our Audio Player 27:20 Styling the progress bar 38:14 Interactive functionality with JavaScript 38:48 My
Back to Top