0

Explore Products

Best Sellers

New Releases

Books

Videos

Audiobooks

Free Learning

Generative Music Box Project Using JavaScript

Generative Music Box Project Using JavaScript: Build a generative app in the browser with JavaScript

Elisabeth Robson Eric Freeman

€26.99

Video May 2021 1hr 14mins 1st Edition

Renews at €18.99p/m

Elisabeth Robson Eric Freeman

€26.99

Video May 2021 1hr 14mins 1st Edition

Renews at €18.99p/m

Renews at €18.99p/m

What do you get with a video?

Download this video in MP4 format

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

View table of contents Download Code

Key benefits

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

Description

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

Who is this book for?

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

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

What do you get with a video?

Download this video in MP4 format

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Product Details

Publication date : May 24, 2021

Length: 1hr 14mins

Edition : 1st

Language : English

ISBN-13 : 9781801812306

Category :

Web Development

Languages :

Concepts :

Progressive Web Apps

Tools :

Vim

Frequently bought together

Generative Music Box Project Using JavaScript

Generative Music Box Project Using JavaScript

May 2021 1hr 14mins

Video

€26.99

Hands-On Music Generation with Magenta

Hands-On Music Generation with Magenta

Jan 2020 360 pages

eBook

€17.99 ~~€26.99~~

JavaScript from Beginner to Professional

JavaScript from Beginner to Professional

Dec 2021 546 pages

eBook

€15.99 ~~€23.99~~

Total € 83.96 89.97 6.01 saved

Generative Music Box Project Using JavaScript

€26.99

Hands-On Music Generation with Magenta

€32.99

JavaScript from Beginner to Professional

€23.98 ~~€29.99~~

Total € 83.96 89.97 6.01 saved

Table of Contents

6 Chapters

Generative Music Box Project

Guide to the Project

Exercise: Think about the App

The Canvas

Working with the Canvas

Create the View

How to Draw a Circle on the Canvas

Handling Clicks

Handle Clicks on the Canvas

Crash Test the Click Handler

The View

A Little Design

Draw the Circles on the Canvas

Crash Test the Circles

How to Animate the Circles

Crash Test the Animation

Repeat the Animation

Crash Test the Repeating Circles

The Audio

Play Audio with Each Circle

Extras

Bonus: Update Your Music Box App With the latest ES6 JavaScript

Recommendations for you

React and React Native

React and React Native

Apr 2024 508 pages

eBook

€17.99 ~~€26.99~~

Django 5 for the Impatient

Django 5 for the Impatient

Sep 2024 228 pages

eBook

€13.99 ~~€20.99~~

Django 5 By Example

Django 5 By Example

Apr 2024 820 pages

eBook

€17.98 ~~€29.99~~

AI Strategies for Web Development

AI Strategies for Web Development

Sep 2024 458 pages

eBook

€15.99 ~~€22.99~~

Mastering Angular Test-Driven Development

Mastering Angular Test-Driven Development

Oct 2024 246 pages

eBook

€15.99 ~~€22.99~~

GraphQL Best Practices

GraphQL Best Practices

Oct 2024 422 pages

eBook

€15.99 ~~€23.99~~

C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals

C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals

Nov 2023 828 pages

eBook

€20.98 ~~€29.99~~

Building Python Microservices with FastAPI

Building Python Microservices with FastAPI

Aug 2022 420 pages

eBook

€19.99 ~~€28.99~~

Building Production-Grade Web Applications with Supabase

Building Production-Grade Web Applications with Supabase

Aug 2024 534 pages

eBook

€15.99 ~~€23.99~~

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

Sep 2022 498 pages

eBook

€17.99 ~~€26.99~~

People who bought this also bought

Building Python Microservices with FastAPI

Building Python Microservices with FastAPI

Aug 2022 420 pages

eBook

€19.99 ~~€28.99~~

React and React Native

React and React Native

May 2022 606 pages

eBook

€20.98 ~~€29.99~~

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

Sep 2022 498 pages

eBook

€17.99 ~~€26.99~~

C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals

C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals

Nov 2023 828 pages

eBook

€20.98 ~~€29.99~~

C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals

C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals

Nov 2022 818 pages

eBook

€20.98 ~~€29.99~~

About the authors

Elisabeth Robson

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.

See other products by Elisabeth Robson

Eric Freeman

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.

See other products by Eric Freeman

FAQs

How can I download a video package for offline viewing?

Login to your account at Packtpub.com.
Click on "My Account" and then click on the "My Videos" tab to access your videos.
Click on the "Download Now" link to start your video download.

How can I extract my video file?

All modern operating systems ship with ZIP file extraction built in. If you'd prefer to use a dedicated compression application, we've tested WinRAR / 7-Zip for Windows, Zipeg / iZip / UnRarX for Mac and 7-Zip / PeaZip for Linux. These applications support all extension files.

How can I get help and support around my video package?

If your video course doesn't give you what you were expecting, either because of functionality problems or because the content isn't up to scratch, please mail customercare@packt.com with details of the problem. In addition, so that we can best provide the support you need, please include the following information for our support team.

Video
Format watched (HTML, MP4, streaming)
Chapter or section that issue relates to (if relevant)
System being played on
Browser used (if relevant)
Details of support

Why can’t I download my video package?

In the even that you are having issues downloading your video package then please follow these instructions:

Disable all your browser plugins and extensions: Some security and download manager extensions can cause issues during the download.
Download the video course using a different browser: We've tested downloads operate correctly in current versions of Chrome, Firefox, Internet Explorer, and Safari.