Building a Generative AI Music Visualizer with JavaScript and React

Focused View

Eve Porcello

47:32

0 View

01 - Introduction

01 - Creating a JavaScript music visualizer with AI.mp4

00:54

02 - What you should know.mp4

00:39

03 - Setting up your environment.mp4

01:34

02 - 1. Creating the Project

01 - Generating a React application with Next.js.mp4

02:40

02 - Understanding the Next.js project architecture.mp4

01:44

03 - Creating React components.mp4

03:20

04 - Defining the canvas.mp4

02:42

05 - Introducing p5.js.mp4

04:08

06 - Positioning audio notes.mp4

04:31

03 - 2. Incorporating ml5 Models

01 - Working with the ml5 library.mp4

02:19

02 - Starting the audio context.mp4

02:42

03 - Handling audio frequencies.mp4

01:42

04 - Incorporating useEffect for the audio context.mp4

02:53

05 - Listening to the audio context.mp4

02:30

06 - Using the pitch detection model.mp4

03:30

04 - 3. Enhancing the App

01 - Adjusting useEffect.mp4

01:29

02 - Changing note colors.mp4

03:37

03 - Loading React components dynamically.mp4

02:17

04 - Testing the app.mp4

01:13

05 - Conclusion

01 - Next steps.mp4

01:08

Description

In this course, learn how artificial intelligence technologies generate and manipulate visual content, enabling innovative applications in digital art and design. This knowledge empowers creators to leverage AI in crafting visuals, revolutionizing the fields of graphic design, entertainment, and media production. Instructor Eve Porcello takes you through the entire process of creating a generative AI music visualizer, from setting up a React application with Next.js, to using the ml5 library to incorporate AI functionalities, to enhancing your app with effects and color changing characteristics.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

Eve Porcello

Instructor's Courses

Eve Porcello is the co-founder of Moon Highway, a curriculum development and training company based in Northern California. For almost a decade, she has taught JavaScript, GraphQL, and React training workshops to tech professionals around the world. She is the co-author of Learning React and Learning GraphQL from O’Reilly Media. You can follow her on Twitter @eveporcello or find her articles at www.moonhighway.com/articles.

Linkedin Learning

View courses Linkedin Learning

LinkedIn Learning is an American online learning provider. It provides video courses taught by industry experts in software, creative, and business skills. It is a subsidiary of LinkedIn. All the courses on LinkedIn fall into four categories: Business, Creative, Technology and Certifications. It was founded in 1995 by Lynda Weinman as Lynda.com before being acquired by LinkedIn in 2015. Microsoft acquired LinkedIn in December 2016.