How to Build Your Own Soundboard App With Android App Inventor

How to Build Your Own Soundboard App With Android App Inventor

Today we’re going to show you how to use the Android App Inventor tool to create your own Android app, without having to write a lot of complicated code. It’s a really simple process that only requires some dragging and dropping.

Soundboards are among the simplest apps to create using App Inventor, so today we’ll show you how to get started creating your own application.

This guest article was written by Mitch Bartlett from Technipages, where he covers lots of in-depth smartphone tips.

Installing and Using App Inventor to Create an App

First, you’ll need to make sure that you install Java 1.6 or higher. You can download it at http://www.java.com. Once you’re done with that, install the App Inventor using the instructions for your operating system.

• Mac OS X
• GNU/Linux
• Windows

Visit the My Projects section of the App Inventor site. Login and agree to the terms of service if prompted. Select the New button to start a new app.

Give your app a unique name, then click OK.

The App Inventor viewer will appear. This screen shows what your app will look like as you build it. First we’ll want to make a title for this screen. Over on the Components pane, Screen1 should be selected. Under the Properties section, we can change the Title field to the name of our app.

Now we can start arranging items on the screen. We’re going to make columns and rows for our soundboard buttons. We can do this by selecting Screen Arrangement on the Palette and dragging the TableArrangement item to the Viewer.

Set the Properties for the TableArrangement1 component on the Properties pane. Here, we’ll change it to 3 columns and 3 rows.

We’ll need a component to play our sounds. Select Media on the Palette, and drag the Player component to the Viewer. It will appear as Player1 in the Non-visible components section.

Let’s add some sounds to our project. App Inventor will support MP3 or WAV files that are under 3MB in size. We add them to our project by selecting the Player1 component, then selecting the Source field. Click the Add… button and select Browse… to upload sound files from your PC. Repeat these steps to add multiple sounds.

Add a button for each sound by selecting the Basic Palette and dragging them over to the TableArrangement1 box in the Viewer. You will be able to place each button within a specific row and column.

Select each button in the Components area and change the Text fields to represent the sounds they will play.

We’re finished with the Viewer screen. This is what our app currently looks like.

It’s time to control the behavior of the items on the screen. Click Open the Blocks Editor to get started. Choose to open the file or grant access if prompted.

Click the My Blocks tab. Select Button1 and drag the “Button1.Click” box over to the right side of the screen. Do this for every button you’ve added to your app (Button2, Button3, etc.)

Select Player1 under the My Blocks tab and drag the “Player1.Source” block to the “Button1.Click” block. The block should connect into place. Add a “Player1.Source” block to each of the other button click blocks as well (Button2.Click, Button3.Click, etc.)

Click the Built-In tab and select Text. Drag a “text” block over to the right and connect it to the “Player1.Source” block.

The “text” box will control which sound is played. Click the text in the block and change it to match the name of the sound file for Button1. In our example, Button1 is “Punch”, so we set the text to Punch.mp3.

Drag a “text” box to each “Player1.Source” block and change each one to match the name of the sound for each button.

Now that the sounds are set for each button, we just need to tell our app to play the sound whenever we click the button. To do that, click the My Blocks tab and select Player1. Drag the “Player1.Start” block to the “Button1.Click”. Repeat these steps for each of the button click event blocks.

You’re done! You have created a fully functioning soundboard app. See the app in action by doing one of the following:

• Test out the app on your Android device by enabling USB Debugging on the device under Settings > Applications > Development and connecting it to your computer. You can then click the Connect to Device… button in the Blocks Editor to display the app on the device.
• Install the Android SDK and click the New emulator button to view it on your computer in an emulator screen.
• Click the Package for Phone option on the App Inventor screen. Then you can Show Barcode, Download the app to the computer as an APK file, or download to a connected phone.
  

Enjoy your customized soundboard app on your Android device.

There’s lots of apps you can create with this tool—what are you going to make?