6 – Simon Says – Sounds

We add functionality to the “Simon Says” game that we started last week; specifically, we add sound and figure out how to create random sequences that we can use in the game.

Watch this video about the difference between analog and digital signals by bookofscience at home: What is Analog and Digital?

Watch this video about digitizing sound by Production Bytes at home: Digital Audio 101

Class work

Topics for today

  • Analog vs. digital
  • Audio formats supported by the Audio element of HTML 5
    • wav: Wave Audio Format (Uncompress format by MS)
    • mp3: Motion Picture Experts Group format (Compressed format)
    • ogg: (no license)
  • HTML Events
  • HTML5 audio
  • freesound.org
  • Audacity

Workfiles

Download in class: simon-says.zip

Individual files:

We are starting where we left off last week, on version 0 of Simon Says, i.e., we will use simon_0.html and lib0.js and add functions to it to get to version 1.

v1 – Playing pitches when we click on the lightbulbs

  1. simon_1.html: the only change is to point to the new js script
     

    <!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
        <title>Simon Says</title>
    </head>
    
    <body>
        <div id = "container">
            <div id = "header">
                <h1 id = "title">Sounds</h1>
            </div>

            <div id = "game">
                <img id="lb_0" onclick="lb_click(0)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_1" onclick="lb_click(1)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_2" onclick="lb_click(2)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_3" onclick="lb_click(3)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_4" onclick="lb_click(4)" src="images/lb_off.png" width="100" height="188">
            </div>

            <div id = "footer">
                <button id="btn_0" type="button" onclick="play_game()">Play!</button>
            </div>
        </div>
        <script type="text/javascript" src="lib1.js"></script>
    </body>
</html>

     

  2. lib1.js: adding sounds
     

    var SS = {};  // Global object container

function init_images() {
    SS.img_off = "images/lb_off.png";

    SS.img_on = [ "images/lb_yellow.png",
                  "images/lb_blue.png",
                  "images/lb_green.png",
                  "images/lb_red.png",
                  "images/lb_purple.png"];

    SS.n = SS.img_on.length;

    SS.img_delay = 800;  
}

function turn_lb_on(i, image) {
    image.src = SS.img_on[i];
}

function turn_lb_off(image) {
    image.src = SS.img_off;
}

function lb_click(i) {
    var img_id = "lb_" + String(i);
    var image = document.getElementById(img_id);

    turn_lb_on(i, image);
    setTimeout( function(){turn_lb_off(image)}, SS.img_delay);
}

function play_game() {
    alert("play game");
}

window.onload = function() {
    init_images();
}

function P(i){
    console.log(i);
}

     

  3. Our page so far: simon_1.html

Mini-project (estimated time: 1:30 hour)

For the following exercise, our starting point is simon_1. Download the following file that contains the simon_1 version together with new sounds and images: ss-class-exercise.zip

  1. Replace the sounds of the lightbulbs with other sounds. The new version should work something like this:
    simon_1_class_sounds.html

    Note: Audacity saves new files with a permission of 640 (No access for everyone). In that case, they will play correctly locally but when uploaded to a server they will generate the following error:

    “Failed to load resource: the server responded with a status of 403 (Forbidden)”

    In this case, you need to change the permission of the file to 644 (Read-only for everyone), e.g., in the Mac, you can change the permissions of a file in the ‘Sharing and Permissions’ section of the the ‘Get Info’ window of the corresponding file.

  2. Replace the initial images of the lightbulbs with other images. The new version should work something like this:
    simon_1_class_images_a.html
  3. Replace the images of the lightbulbs with other images. The new version should work something like this:
    simon_1_class_images.html

Answer:

ss-class-exercise-solution.zip