Creating Time Jumps for our Custom Audio Player in React
1.8 هزار بار بازدید -
3 سال پیش
-
In this video, Amy adds
In this video, Amy adds Time Jumps to the custom audio player she's been building in React. This allows the user to click on a specific link that will automatically jump the play head to that point in the audio and auto-play.
0:00 Introduction
1:15 Getting the Project Up and Running on Your Machine
1:47 How this needs to work
3:24 Grabbing content from our URL with Next.js Router
6:01 Writing Reusable Code
6:13 Reusing our Code from the Forward and Backward 30 Buttons
7:20 Auto-Playing our Audio File
10:03 Refactoring our code
11:22 Sponsor: ZEAL
💥 ZEAL IS HIRING 💥
http://softwareresidency.com/zeal
⭐ MULTI-PART SERIES
* Part 1 - Building a Custom Audio Player within React - How to Build a Custom Audio Player in...
* Part 2 - Debugging within VS Code - Debugging Inside VS Code
* Part 3 - Adding Chapters / Bookmarks - Adding Bookmarks or Chapters to our C...
* Part 4 - Adding Time Jumps = YOU ARE HERE
* Part 5 - When the player reaches the end...
* Part 6 - Creating Custom Hooks
* Part 7 - Creating a Custom npm package
* Part 8 - Adding an Audio Waveform Image
* Part 9 - Handling Multiple Audio Players on the Page
* Part 10 - Handing off to a Persistent Player
🏁 STARTING POINT
+ GitHub - https://github.com/selfteachme/0048-a...
🤖 FINAL CODE
* GitHub - https://github.com/selfteachme/0049-t...
🔗 LINKS
* Next.js Router Documentation - https://nextjs.org/docs/api-reference...
👉🏻 Get Updates and Exclusive content at http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com
0:00 Introduction
1:15 Getting the Project Up and Running on Your Machine
1:47 How this needs to work
3:24 Grabbing content from our URL with Next.js Router
6:01 Writing Reusable Code
6:13 Reusing our Code from the Forward and Backward 30 Buttons
7:20 Auto-Playing our Audio File
10:03 Refactoring our code
11:22 Sponsor: ZEAL
💥 ZEAL IS HIRING 💥
http://softwareresidency.com/zeal
⭐ MULTI-PART SERIES
* Part 1 - Building a Custom Audio Player within React - How to Build a Custom Audio Player in...
* Part 2 - Debugging within VS Code - Debugging Inside VS Code
* Part 3 - Adding Chapters / Bookmarks - Adding Bookmarks or Chapters to our C...
* Part 4 - Adding Time Jumps = YOU ARE HERE
* Part 5 - When the player reaches the end...
* Part 6 - Creating Custom Hooks
* Part 7 - Creating a Custom npm package
* Part 8 - Adding an Audio Waveform Image
* Part 9 - Handling Multiple Audio Players on the Page
* Part 10 - Handing off to a Persistent Player
🏁 STARTING POINT
+ GitHub - https://github.com/selfteachme/0048-a...
🤖 FINAL CODE
* GitHub - https://github.com/selfteachme/0049-t...
🔗 LINKS
* Next.js Router Documentation - https://nextjs.org/docs/api-reference...
👉🏻 Get Updates and Exclusive content at http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com
3 سال پیش
در تاریخ 1400/04/17 منتشر شده
است.
1,868
بـار بازدید شده