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 Compressed.fm website (http://compressed.fm) -- a podcast all about web design and development.
0:00 Introduction
1:43 Looking at the Design
2:23 Starting with Next.js
4:29 Brief Explanation of Next.js folder structure
5:40 Stubbing out our page
6:24 Styling within Next.js
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 thoughts on using comments
39:19 useReference for grabbing our audio
39:57 Making the audio player actually play and pause
41:58 Connect duration read out
49:29 Connecting the current position read out
50:58 Updating the Progress Bar as the song plays
55:23 Updating the Playhead / Knobby
1:00:00 The Next and Previous 30 Buttons
💥 ZEAL IS HIRING 💥
https://www.codingzeal.com/hiring
🤖 FINAL CODE
GitHub - https://github.com/selfteachme/0046-c...
🔗 LINKS
Next.js Documentation - Getting Started - https://nextjs.org/docs
Hyper, Terminal alternative - http://hyper.is
Additional information on box-sizing: border-box: https://css-tricks.com/box-sizing/
ES7 React / Redux / GraphQL / React-Native Snippets VS Code Extensions - https://marketplace.visualstudio.com/...
HTML audio Element - https://www.w3schools.com/html/html5_...
Simplecast - https://simplecast.com/
React Icons Library - https://react-icons.github.io/react-i...
CSS-Tricks styling the progress button - https://css-tricks.com/styling-cross-...
👉🏻 Get Updates and Exclusive content at http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com
