Book Image

Generative Music Box Project Using JavaScript [Video]

By : Elisabeth Robson, Eric Freeman
Book Image

Generative Music Box Project Using JavaScript [Video]

By: Elisabeth Robson, Eric Freeman

Overview of this book

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
Table of Contents (6 chapters)
Chapter 3
Handling Clicks
Content Locked
Section 5
Fix the Bug
It's a quick and easy fix to make sure that this is set to the view object in handleClick. All we have to do is use bind to create a new function with this set to view as we do in the bugfix code. Make this change in "View.js" and reload the "musicbox.html" page in your browser. Now you should be able to click on the canvas and see the correct console message.