Why isn't my Audio Sounding for Simon Game?

JavaScript
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
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

@camperextraordinaire, 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…

7

@camperextraordinaire, 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...
9

@camperextraordinaire, 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…

12

@camperextraordinaire, 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:

14

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

16

@camperextraordinaire, 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…

18

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

Simon%20Game%20issue
Simon%20Game%20issue1355×655 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
20

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

22

“Do you want to work on why when the red button is clicked that the green button disappears”
…lets work on this one first :grin:

24

Hmmmmm!..let mi work through some stuff and come back to you :zipper_mouth_face: :thinking:

25

Looks like you guys are working through this…so I won’t jump in here and make things confusing for you @blitzkreig . Hope you all have a good day!

1 Like