CSc 101: Sound Board

In this (extra-credit) assignment, you’ll be implementing a basic sound-board application. You will need to both play sounds and display images. Below is a video-recording showing the behavior of a solution to this assignment:

The high-level requirements for this program are as follows:

• There should be a title at the top of the canvas.
• You should use an image for the background.
• Below the title will be the main sound-board. The sound board will consist of several buttons. Each button should be an image, and an associated (and unique) sound should play when each image-button is pressed.
• You must have at least 5 different sound-buttons. The provided example has 9 buttons, but you just need to have at least 5.
• Sound shoud be able to play “on-top” of each-other. If you click on a button, then immediately click on another, both can be playing at the same time.
• The left or right side of the screen should have a volume slider. This volume slider can be controlled with mouse clicks. When the mouse is clicked in the volume-slider area of the canvas, the slider box sill move to the corresponding position. Moving the slider should update the overall volume of the sounds that the board generates. There is an example of this in the video-recording.

You can choose whatever theme that you want for this assignment (it doesnt have to be animal-themed). To find sounds for the theme of your choice, just google for sound files. You can also use https://freesound.org/.

Development Strategy

If you break the problem down into smaller “chunks” it becomes much more manageable to tackle. I recommend you use the following strategy to complete:

(1) Choose and display a background

Select a good background image and then set it as the background of your canvas. Make sure the tha image size fits will with the canvas size.

(2) Create the volume slider

Add a volume slider like the one shows to the side of your canvas. Don’t worry about having it actually adjust the volume yet. Just get the clicking and movement working and displaying.

(3) Display a title

Choose a appropriate title for your program, and display it at the top. Make sure you choose a font color that doesnt blend in with the background image too much.

(4) Display the image buttons

Next, place all of the image buttons in the lower portion of the canvas, like you see pictured. Don’t worry about playing the sounds for now.

(5) Playing sounds!

Now, add in the logic to play a sound with each image click. We have done button-pressing in several of the past sections and assignments, so refer to those if you can’t remember how to do so! Each button should play a different sound! Remember to use the SoundFile type to load and play the files. You can refer to the example programs from class or the slides for reference.

(6) Get the volume control working

Lastly, make the volume controller actually change the volume. You can use the SoundFile.amp() function to adjust volume. Remember: volume is controlled with a number between 0.0 and 1.0, so the position of the volume slider needs to be converted to a float!

Comments

All of your programming should be well-formatted and easy for the graders to read and comprehend. You should follow the style guidelines that we have discussed in class. Each program file should have a header comment at the top that has roughly the following format:

//
// Author: Student Name
// Description:
//    A short description of what this program does!
// 

Each function should have a descriptive block-comment above it, and other helpful comments. If any part of your scripts are particularly complex, you should put documentation comments above those lines of code. Name your program netid_sound_board.pde (where netid is your UA username).

This assignment is Extra Credit!

This assignment is purely for extra credit, and is not required. As you know, assignments are worth 50% of your total class grade. This assignment may be used to earn-back points lost on previous assignments. Doing this assignment can improve your assignments portion of your grade up to 3.5% total.

Submission and grading

It is due on 12/6/2017 at 5:00pm (but you may use a late day).

Turn in each of the files described in the spec to the assignment drop-box in D2L before the due date. Make sure to name the file exactly as this document specifies. Make sure to follow all instructions precisely.