Figure 9-1.Figure 9-2. The Xylophone app ur interface
CHAPTER 9
Xylophone
日能
It’s hard to believe that using technology to record
and play back music only dates back to 1878, when
Edison patented the phonograph. We’ve come so far
since then—with music synthesizers, CDs, sampling
and remixing, phones that play music, and even long-
distance jamming over the Internet. In this chapter,
you’ll take part in this tradition by building a
Xylophone app that records and plays music.
What You’ll Build
With the app shown in Figure 9-1 (originally
created by Liz Looney of the App Inventor team),
you can:
•Play eight different notes by touching colored
buttons on the
screen.
•Press a Play button to replay the notes you
played earlier.
•Press a Ret button to make the app clear any
notes you played earlier so that you can enter a
new song.
What You’ll Learn
This tutorial covers the following concepts:
•Using a single Sound component to play
different audio files.
•Using the Clock component to measure and
enforce delays between actions.
150Chapter 9: Xylophone
•Deciding when to create a procedure.
互易率•Creating a procedure that calls itlf.
•Advanced u of lists, including adding items, accessing them, and clearing the list.
Getting Started
Connect to the App Inventor website and start a new project. Name it “Xylophone”, and also t the screen’s title to “Xylophone”. Connect your app to your device or emulator.
Designing the Components
支是什么结构This app has 13 di ff erent components (8 of which compri the keyboard), which are listed in Table 9-1. Becau there are so many, it would get pretty boring to create all of them before starting to write our program, so we’ll break down the app into its functional parts and build them quentially b
y going back and forth between the Designer and the Blocks Editor, as we did with the Ladybug Cha app in Chapter 5. Table 9-1. All of the components for the Xylophone app
Chapter 9, Xylophone
吃柠檬有什么好处Creating the Keyboard
Our ur interface will include an eight-note keyboard for a pentatonic (ven-note)major scale ranging from Low C to High C. We will create this musical keyboard in this ction.
CREATING THE FIRST NOTE BUTTONS
Start by creating the fi rst two xylophone keys, which we will implement as buttons.
1.From the Ur Interface category, drag a Button onto the screen. Leave its name as Button1. We want it to be a long magenta bar, like that on a xylophone,so t its properties as follows:
◦Change the BackgroundColor property to Magenta.
◦Change the Text property to “C”.
左旋肉碱怎么用
◦Set the Width property to “Fill parent” so that it spans all the way across the screen.
◦Set the Height property to 40 pixels.
2.Repeat for a cond Button , named Button2, placing it below Button1. U the same Width and Height property values, but t its BackgroundColor property to Red and its Text property to “D”.
(Later, we will repeat step 2 for six more note buttons.)
The view in the Component Designer should look something like Figure 9-2
.Figure 9-3. Placing buttons to create a keyboard
151
Creating the Keyboard Creating the Keyboard
152Chapter 9: Xylophone
The display on your phone should look similar, although there will not be any empty space between the two colored buttons.
ADDING THE SOUND COMPONENT
We can’t have a xylophone without sounds, so drag in a Sound component, leaving its name as Sound1. Change the MinimumInterval property from its default value of 500 milliconds to 0. This allows us to play the sound as often as we want, instead of having to wait half a cond (500 milliconds) between plays. Don’t t its Source property, which we will t in the Blocks Editor.
Download the sound fi les:appinventor/bookFiles/Xylophone/1.wav and appinventor/bookFiles/Xylophone/2.wav. Unlike in previous chapters, where it was okay to change the names of media fi les, it is important to u the exact names for reasons that will soon become clear. You can upload the remaining six sound fi les when directed to later.
CONNECTING THE SOUNDS TO THE BUTTONS
The behavior we need to program is for a sound fi le to play when the corresponding button is clicke
d. Speci fi cally, if Button1 is clicked, we’d like to play 1.wav; if Button2 is clicked, we’d like to play 2.wav; and so on. We can t this up in the Blocks Editor, as shown in Figure 9-3, by doing the following:
1.From the Button1 drawer, drag out the Button1.Click block.
2.From the Sound1 drawer, drag out the t Sound1.Source block, placing it in the
Button1.Click block.
3.Type “text” to create a text block. (This is quicker than going to the Built-In tab
岱山旅游and then the Text drawer, although that would work, too.) Set its text value to “1.wav” and place it in the Sound1.Source block.
4.Add a Sound1.Play
block.
Figure 9-4. Playing a sound when a button is clicked
We could do the same for Button2, as shown in Figure 9-4 (just changing the text value), but the code would be awfully repetitive.
Chapter 9, Xylophone
Figure 9-5. Adding more sounds
Repeated code is a good sign that you should create a procedure, which you’ve already done in the MoleMash game in Chapter 3 and the Ladybug Cha game in Chapter 5. Speci fi cally, we’ll create a procedure that takes a number as a parameter,ts Sound1’s Source to the appropriate fi le, and plays the sound. This is another
example of refactoring—improving a program’s implementation without changing its behavior, a concept introduced in the MoleMash tutorial. We can u the Text drawer’s join block to combine the number (e.g., 1) and the text “.wav” to create the proper fi lename (e.g., “1.wav”). Here are the steps for creating the procedure we need:
1.Under the Built-In tab, go to the Procedures drawer and drag out the to procedure do block. (Unle
法国著名大学ss otherwi specified, you should choo the version with “do”, not “result”.)
2.Add the parameter by clicking on the little blue icon on the to procedure do block, dragging over an input, and changing its name from “x” to “number”.You might want to review Figure 5-6 from Chapter 5.
3.Click the name of the procedure, which by default is “procedure” and t it to “PlayNote”.
4.Drag the Sound1.Source block from Button1.Click into PlayNote to the right of the word “do”. Move the Sound1.Play block into PlayNote as well.
5.Drag the 1.wav block into the trash can.
6.From the Text drawer, drag the join block into Sound1.Source ’s socket.
7.Type “number” and move it to the top socket of the join block (if it is not already there).
8.From the Text drawer, drag the text block into the cond socket of the join block.
9.Change the text value to “.wav”. (Remember not to type the quotation marks.)
10.From the Procedures drawer, drag out a call PlayNote block and place into the
empty body of Button1.Click .
面朝黄土背朝天
11.Type “1” and put it in the “number” socket.
153
Creating the Keyboard Creating the Keyboard
