Tutorial 9

Learning Objectives:

1. WARNING
2. Loading and playing sound files
3. Binding sound files to various actions
4. Mouse Released (Toggle button and more!)
5. Exercises

Try some sample code

Follow this Thimble link

Useful functions

.play()

.isPlaying()

.setVolume()

.loop()

.stop()

1. WARNING

To test the operation of a sound file you must

a) Publish your thimble project

b) You must open the hyperlink from the published project

2. Loading and playing sound files

Similar to working with image files, sound files must be preloaded before they can be played.

a) upload your sound file on dropbox

b) create the variable for your sound file

c) load the sound file in function preload()

d) play the sound file in function draw() or a separate function within function draw()

Below you will find some sample code

// b) create the variable
var asoundFile;

function preload()
{
    // c) load the sound file in function preload
    asoundFile = loadSound('https://dl.dropboxusercontent.com/s/bziq4gufuakv7go/dolow.mp3');
}

function draw()
{
    // d) playd the sound file in function draw
    // check if the sound file is playing, if it not already playing then play 
    if (asoundFile.isPlaying() == false)
    {
      asoundFile.play();
    }
}

3. Binding sound files to various actions

Now that you have some basic understanding of how to load and create a sound file lets apply our sounds and bind it in application to other actions such as pushing a button or upon completion of an action.

Example 1

In the code below we have a simple button. The button will play the music once it is pressed

fill(255,0,0);
  rect(10,10+y,90,90);
  fill(0,0,0);
  text("Play Safe",30,50+y);

  if (mouseX > 10 && mouseX < 100 && mouseY > 10+y && mouseY < 100+y && mouseIsPressed == true)
  {
    if (sympno5.isPlaying() == false)
    {
      sympno5.play();
    }
  }

Example 2

In the example below the music file is played once the stateOfCircle becomes the value of 3

if (stateOfCircle == 3)
  {
    if (sympno5.isPlaying() == false)
    {
      sympno5.play();
    }
  }

4. Mouse Released (Toggle button and more!)

It is possible to detect when we release from a mouse button. The advantage is that when you hold onto a button with your mouse it will register as multiple clicks.

First we define the function mouseReleased(). Note: mouseReleased() is a special function which will execute all the code inside when you release from any mouse button. You may add if (mouseButton == LEFT) for example to target a left mouse up.

In the example below we demonstrate how we can create a TOGGLE BUTTON. A toggle button works where pushing on the button will perform one action and a second push will perform an alternative action.

TOGGLE BUTTON OPERATION

a) Default button -> action1

b) 1 press -> action 2

c) 2 press -> action 1

d) 3 press -> action 2

CODING

a) declare necessary variables

b) setup initial variable values

c) setup mouseReleased

d) create condition and define it's contents

// a) declare necessary variables
var lock;
var mute;

function setup()
{
  createCanvas(700,500);
  canvas = 1;

  // b) setup initial variable values
  mute = 1.0;
  lock = false; // lock is false or open
}

function blah()
{
  // only perform the button action when the lock is open (false) and we click on the button
  if (lock == false && mouseX > 210 && mouseX < 300 && mouseY > 10+y && mouseY < 100+y && mouseIsPressed == true)
  {
    // when we click on the button lock it by setting it's value to true
    // this will prevent the button from accepting multiple clicks when we hold the mouse button
    lock = true; 

    // toggle mute value, if it is 0 make it 1, if it is 1 make it 0
    // note that we must use an if-else chain otherwise it overwrites
    // it's own value
    if (mute == 0)
    {
        // modify the volume 0.0 is silent
        sympno5.setVolume(0.0);
        mute = 1;
    }
    else if (mute == 1)
    {
        // 1.0 is full volume
        sympno5.setVolume(1.0);
        mute = 0; 
    }
  } 
}

// c) setup mouseReleased
function mouseReleased()
{
   // since lock is a boolean value we can use it for evaluation
   // only if the lock is true do we set it to false when we
   // release from our mouse button
   if (lock)
   {
      lock = false;
   }
}

5. Exercises

Prepare 2 Canvases

Exercise 1) Create a single Canvas button that will toggle between 2 canvases. Make sure you change the button name so you understand which canvas you are on "Current Canvas 1". (If you have time I would encourage you to add a mouse down effect to the button, the effect can be a visual change like color or size or even a border thickening)

Exercise 2) Canvas 1: Using Tutorial 8 exercise 1, bind sound effects to the following buttons and actions. You will need to prepare 3 short sound effect files let's call them A, B and C

• When you click on the reset button play sound effect A
• When you click on the default move square right button play sound effect B
• When the square stops moving right play sound effect C

Exercise 3) Canvas 2: Using Tutorial 8 exercise 2-3 where you have a mini version of the escape room as a basis.

Prepare the following sound files

D) background music longer than 3 mins

E) sound effect for mouse hover over an item

F) sound effect for an item as it lands in the inventory.

Create the following effects

• play background music when Canvas2 is clicked. Stop the music when you toggle to Canvas1. Loop the music so it repeats
• play a sound effect once when you first hover over an item
• play a sound effect whenever any item lands in it's inventory
• Set a volume control somewhere using the sliders we learned in tutorial 4. When you modify the slider button it should increase or decrease the background music.

HINT: the setVolume command only accepts value between 0.0 and 1.0. The slider accepts whole values, therefore you must perform a division command to convert the whole value into a decimal value. E.g. 28/100 = 0.28