Рет қаралды 55,109
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 (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 💥
www.codingzeal.com/hiring
🤖 FINAL CODE
* GitHub - github.com/selfteachme/0046-c...
🔗 LINKS
* Next.js Documentation - Getting Started - nextjs.org/docs
* Hyper, Terminal alternative - hyper.is
* Additional information on box-sizing: border-box: css-tricks.com/box-sizing/
* ES7 React / Redux / GraphQL / React-Native Snippets VS Code Extensions - marketplace.visualstudio.com/...
* HTML audio Element - www.w3schools.com/html/html5_...
* Simplecast - simplecast.com/
* React Icons Library - react-icons.github.io/react-i...
* CSS-Tricks styling the progress button - css-tricks.com/styling-cross-...
👉🏻 Get Updates and Exclusive content at selfteach.me
💥 SelfTeach.me is a Zeal show: codingzeal.com