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
Watch video How to Build a Custom Audio Player in React online without registration, duration hours minute second in high quality. This video was added by user Self Teach Me 11 May 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 57,314 once and liked it 1.4 thousand people.