Pocket Synthesizer App: Play Music on Your Phone

Create a simple synthesizer app.

In this tutorial, we will create a synthesizer app that lets you choose and play several instruments. I consulted Google Gemini 3 Pro and built it in JavaScript using Tone.js to produce sound.

You can download the source code (aia file) and the HTML file with JavaScript from the download section at the bottom of the page.

What You Will Learn in This Tutorial

• How to execute JavaScript in a WebViewer
• How to perform loop processing using the “Any Component" block

Components Used

Button, Label, Spinner, WebView, HorizontalArrangement

Blocks Used

Global Variable, Text, List, Dictionary, when any Buttons

Designer

Set the title of Screen1 to “Pocket Synthesizer" and ScreenOrientation to Landscape.

Upload the sound_engine.html file you downloaded from the download section at the bottom of the page by clicking the Upload File button in the Media section.

Add two HorizontalArrangement components from the Layout palette and arrange them vertically on the viewer. They should be named HorizontalArrangement1 and HorizontalArrangement2 in order from top to bottom. Set the AlignHorizontal to 'Center’ and the Width of all HorizontalArrangements to 'Fill parent’. Set the Height of HorizontalArrangement2 to 'Fill parent’.

From the User Interface palette, add Label and Spinner to HorizontalArrangement1. They should be named Label1 and Spinner1. Set Text of Label1 to “Instrument", FontSize of Label1 to 18.0, and ElementsFromString of Spinner1 to “Grand piano, Flute, Trumpet, Guitar, Cello".

From the User Interface palette, add eight Buttons to HorizontalArrangement2. Name these Buttons Do, Re, Mi, Fa, So, La, Ti, and Do2. Set the Height of each Button to 'Fill parent’ and Width to 10%.

From the User Interface palette, add WebViewer and uncheck Visible property.

Blocks Editor

Global Variables

From the Variables drawer in the Built-in Blocks, drag and drop 2 “initialize global variable name to" blocks. Rename the variable names as shown below and set their initial values.