Cademy logoCademy Marketplace

Course Images

Generative Music Box Project Using JavaScript

Generative Music Box Project Using JavaScript

  • 30 Day Money Back Guarantee
  • Completion Certificate
  • 24/7 Technical Support

Highlights

  • On-Demand course

  • 1 hour 14 minutes

  • All levels

Description

In this course, we'll build a generative music box app in the browser with JavaScript. For this course, you need basic knowledge of HTML, CSS, and JavaScript programming skills. This course is a great way to practice programming in JavaScript by creating an interactive and dynamic application right in your browser.

JavaScript frameworks are great tools to build mobile apps. They're efficient, have lower development costs, and tend to have the security benefits that come with large, active communities of developers. In this course, we'll take inspiration from Brian Eno and Peter Chilvers' Bloom application and build a generative music box app in the browser with JavaScript. We'll build a web application using JavaScript, which allows you to create generative, ambient music. With a small amount of code, we'll handle our mouse clicks, use the canvas for the user interface and graphics, and leverage the Web Audio API to create sound. We'll also spend a lot of time scheduling events and organizing our code. This project is a great way to practice programming in JavaScript by creating an interactive and dynamic application right in your browser. For this course, you need basic knowledge of HTML, CSS, and JavaScript programming skills. By the end of this course, we'll be creating a completely running music box application. All the code files and resources for this course are available at https://github.com/PacktPublishing/Generative-Music-Box-Project

What You Will Learn

Build a generative app in the browser with less coding
Use Canvas to create the app view
Handle clicks on the View to create circles on the canvas
Learn how to draw the circles on the canvas when you update the view
Add audio to the app
Update your music box app with the latest ES6 JavaScript features

Audience

This course is for anyone who has basic HTML, CSS, and JavaScript programming skills and wants to learn how to build a generative app.

Approach

This is a complete hands-on course where we'll build a generative app with JavaScript.

Key Features

Build a generative music box app in the browser with JavaScript * Use Canvas to build music box app view and add audio files * Update your generative music box app with ECMAScript features

Github Repo

https://github.com/PacktPublishing/Generative-Music-Box-Project-Using-JavaScript

About the Author

Elisabeth Robson

Elisabeth Robson is a co-founder and principal at WickedlySmart, an author and software developer, and teaches online courses for O'Reilly Media and LinkedIn Learning. She's the co-author of four best-selling titles-Head First JavaScript Programming, Head First Design Patterns, Head First HTML & CSS, and Head First HTML5 Programming-and was previously the director of special projects and co-director of the Head First series at O'Reilly Media. Prior to her work at O'Reilly Media, Elisabeth was the director of engineering at The Walt Disney Company. Elisabeth holds a master's degree in computer science from Yale University.


Eric Freeman

Eric Freeman is described by Head First series co-creator Kathy Sierra as 'one of those rare individuals fluent in the language, practice, and culture of multiple domains from hipster hacker, corporate VP, engineer, think tank.' Professionally, Eric recently ended nearly a decade as a media company executive, having held the position of CTO of Disney Online at The Walt Disney Company. Eric now devotes his time to writing and teaching software technology.

Course Outline

1. Generative Music Box Project


2. The Canvas


3. Handling Clicks


4. The View


5. The Audio


6. Extras

Course Content

  1. Generative Music Box Project Using JavaScript

About The Provider

Packt
Packt
Birmingham
Founded in 2004 in Birmingham, UK, Packt’s mission is to help the world put software to work in new ways, through the delivery of effective learning and i...
Read more about Packt

Tags

Reviews