Why isn't my Audio Sounding for Simon Game?

Why isn't my Audio Sounding for Simon Game?
0
#1

Hi, everyone!

I’m trying to get my audio to sound when a random button is selected by Simon, or even when the user presses it, but it is not working! Thanks in advance for your help!

Here is a link to my CodePen: https://codepen.io/IDCoder/pen/RBEoQz?editors=1011

And here is a snippet of related code:

//tie this if function into start button to enable random button to be selected by Simon game and audio played
  if(buttons.length > 0) { //as long as greater than 0, can be two buttons, etc
    function getRandomIndex(){
      var random = Math.floor(Math.random() * 4);
      buttons.item(random).click(); //randomIndex is parameter of item
      simonGamePlays.push(random);
      
      if(random[i]==1){
       lightup = 'hit-zero-green';
       $('.hit-zero-green').addClass(lightup);
       $('#audio1')[0].play();
       simonGamePlays.push(1);
        
        setTimeout(function () {
          $('.hit-zero-green').removeClass(lightup);
        }, off);
        
       }else if (random[i] == 2) {
          lightup = 'hit-zero-red';
          $('.hit-zero-red').addClass(lightup);
          $('#audio-two')[0].play();
          simonGamePlays.push(2);

          setTimeout(function () {
          $('.hit-zero-red').removeClass(lightup);
           }, off);

       }else if (random[i] == 3) {
         lightup = 'hit-zero-blue';
         $('.hit-zero-blue').addClass(lightup);
         $('#audio3')[0].play();
         simonGamePlays.push(3);

         setTimeout(function () {
         $('.hit-zero-blue').removeClass(lightup);
         }, off);
        }else if (random[i] == 3) {
          lightup = 'hit-zero-yellow';
          $('.hit-zero-yellow').addClass(lightup);
          $('#audio4')[0].play();
          simonGamePlays.push(4);
          
          setTimeout(function () {
            $('#sound-four').removeClass(lightup);
          }, off);
         }
       
  }
    //outside function
    getRandomIndex(); // function call
}
} //end of turn game on function
#2

You declared random to be a number in the line below inside your getRandomIndex function, so when you reference random[i] it is undefined, so none of your if or if else statements will evaluate to true.

var random = Math.floor(Math.random() * 4);
#3

Hey - I don’t know if this is all of the issue but this might be a part of it…in your HTML where you have the audio and src tags. It’s actually supposed to be like this:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
</audio>

This sample is from this link here: W3Schools

Hopefully this helps!

#4

@randelldawson, hmmm…so do I take out the [i]?

#5

@CandiW, yeah I know about this, but I saw someone who did it the way I did it too and hers worked…

#6

Yes. Also I second the recommendation by @CandiW regarding the use of audio tag syntax. Also, be aware you have id=“audio2” on one of your audio elements, but in your JavaScript you reference “audio-two”.

Once you resolve the above issues, you still have many more logic issues to resolve.

On a side note, from a design standpoint, I would move the social media/email buttons to be below the main part of the game. They are not part of the game controls and should not be mixed in between the controls and the game buttons. You could still put them in the black section and look fine.

#7

@randelldawson, so something like this:

 //tie this if function into start button to enable random button to be selected by Simon game and audio played
  if(buttons.length > 0) { //as long as greater than 0, can be two buttons, etc
    function getRandomIndex(){
      var random = Math.floor(Math.random() * [i]);
      buttons.item(random).click(); //randomIndex is parameter of item
      simonGamePlays.push(random);
      
      if(random==1){
       lightup = 'hit-zero-green';
       $('.hit-zero-green').addClass(lightup);
       $('#audio1')[0].play();
       simonGamePlays.push(1);
        
        setTimeout(function () {
          $('.hit-zero-green').removeClass(lightup);
        }, off);
        
       }else if (random== 2) {
          lightup = 'hit-zero-red';
          $('.hit-zero-red').addClass(lightup);
          $('#audio2')[0].play();
          simonGamePlays.push(2);

          setTimeout(function () {
          $('.hit-zero-red').removeClass(lightup);
           }, off);

       }else if (random == 3) {
         lightup = 'hit-zero-blue';
         $('.hit-zero-blue').addClass(lightup);
         $('#audio3')[0].play();
         simonGamePlays.push(3);

         setTimeout(function () {
         $('.hit-zero-blue').removeClass(lightup);
         }, off);
        }else if (random== 4) {
          lightup = 'hit-zero-yellow';
          $('.hit-zero-yellow').addClass(lightup);
          $('#audio4')[0].play();
          simonGamePlays.push(4);
          
          setTimeout(function () {
            $('#sound-four').removeClass(lightup);
          }, off);
         }
       
  }
    //outside function
    getRandomIndex(); // function call
}
} //end of turn game on function

This doesn't work.....when I hit **start**, it only selects the green button lol. 
And yes, I know I have some other logic issues, but I believe I can atleast get the sound to work first lol
Also, about the design, interesting point, I'll think about it...
#8

What do you think that [i] does here? Does i have a value at this point in the code? If it does you have created a literal array with the value of i as it’s only element and then multiply it by Math.random()? You had it right the first time when you were multiplying by 4.

#9

@randelldawson, yeah I saw that in the console, so I changed it back.

#10

@CandiW this audio syntax brings up an audio interface, and I don’t want that…

#11

Just remove the reference to controls.

#12

@randelldawson, that’s how I have it now, without the reference to controls

 <audio id="audio1">
            <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg">
            </audio>
            <audio id="audio2">
            <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg">
            </audio>
            <audio id="audio3">
            <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg">
            </audio>
            <audio id="audio4">
            <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg">
            </audio>

still nothing! :tired_face:

#13

Please update your Codepen. I still see

var random = Math.floor(Math.random() * [i]);
#14

@randelldawson, I had already changed it…it’s var random = Math.floor(Math.random() * 4);

#15

Well, now you are back to:

if(random[i]==1){

which I already explained does not work. If you have another pen, please post it. Otherwise, I am just using the pen you first linked.

#16

@randelldawson, I previously re-wrote it to if(random==1), and if(random==2), and if(random==3), and if(random==4), but it was causing a button to disappear…so I changed it back…

#17

That is a separate issue. If you write if (random[i] == [i]) { , the if statement will never evaluate to true. You said you wanted to focus on getting the sound to play, so I gave you suggestions of how to accomplish that.

I am heading out for a run, so I will be offline for a couple of hours.

#18

@randelldawson ok, I got the audio to start playing but now it creates the following problem

Simon%20Game%20issue
Simon Game issue.jpg1355x655 258 KB

CodePen link at: https://codepen.io/IDCoder/pen/RBEoQz?editors=0011
See code below:

//tie this if function into start button to enable random button to be selected by Simon game and audio played
  if(buttons.length > 0) { //as long as greater than 0, can be two buttons, etc
    function getRandomIndex(){
      var random = Math.floor(Math.random() * 4);
      buttons.item(random).click(); //randomIndex is parameter of item
      simonGamePlays.push(random);
      
      if(random ==1){
       lightup = 'hit-zero-green';
       $('.hit-zero-green').addClass(lightup);
       $('#audio1')[0].play();
       simonGamePlays.push(1);
        
        setTimeout(function () {
          $('.hit-zero-green').removeClass(lightup);
        }, off);
        
       }else if (random == 2) {
          lightup = 'hit-zero-red';
          $('.hit-zero-red').addClass(lightup);
          $('#audio2')[0].play();
          simonGamePlays.push(2);

          setTimeout(function () {
          $('.hit-zero-red').removeClass(lightup);
           }, off);

       }else if (random == 3) {
         lightup = 'hit-zero-blue';
         $('.hit-zero-blue').addClass(lightup);
         $('#audio3')[0].play();
         simonGamePlays.push(3);

         setTimeout(function () {
         $('.hit-zero-blue').removeClass(lightup);
         }, off);
        }else if (random == 4) {
          lightup = 'hit-zero-yellow';
          $('.hit-zero-yellow').addClass(lightup);
          $('#audio4')[0].play();
          simonGamePlays.push(4);
          
          setTimeout(function () {
            $('#sound-four').removeClass(lightup);
          }, off);
         }
       
  }
    //outside function
    getRandomIndex(); // function call
}
} //end of turn game on function
#19

The code you posted here vs. the code in the pen you linked are not the same. The pen link you posted above still has if(random[i]==1){.

#20

@randelldawson, oh! That’s because I didn’t SAVE my changes!
See link now: https://codepen.io/IDCoder/pen/RBEoQz?editors=0011