thank you so much for your reply, I solved that problem, it's working with my own images now after I extracted zip file from Codepen (probably I linked sth wrong myself first ;) Now I'm struggling with another problem. I want to play sound each time we click pair of cards. I'm making a game for my students to learn English.
I don't know how to select the specific card from the array and put it into variable. Query selector won't work, document by ID either, maybe sth similar to this: function playSound() {
let selected = this.dataset.id;
cardsSelected.push(cardArray[selected].name => should I write the name of the card here?); every help much appreciated.
that's the address of my website where I placed it: english-quiz.cba.pl/Memory%20game/...
Sorry for the late reply,
I have updated my codepen link and added sounds like you said. So if two different images are selected, an error sound, and if they are the same picture, a success sound. I am not really good with the audio api, but I hope that is what you want, tell me if you want any change.
It works like this, when you click on two images and it checks if they are the same or not, it sets the src of the audio source and loads it before playing it. Note that the loading is very important,
Hi, thank you so much for your help! it really works! I will include it on my website. It's a little different than what I wanted but also nice. I want to include voice of a lector who will say the correct pronunciation of each card, eg. when they click "trousers" it should say: "trousers, etc. I will think about it. I'm looking for ways to access objects from the array with pictures (cardArray) and make a new variable, eg. var trousers = cardArray[0] and later function: playSound() case: trousers =>"trousers.mp3". Sth like that. I will work on it meantime. Thanks a lot!
Ok I think I have worked on it , the names you will use in each object will be basically the same name has the mp3 like you said.
So what I did was, everytime a card is clicked the name is pushed to an array, I got the name and I appended .mp3 to it and played it.
You can check the link again, but note that mine won't work since I dont have a fries.mp3 :).
And if your music will be in a different folder, you can do this.
source.src=./music/data/${cardsSelected[1]}.mp3
you can use the first or second value since they are basically the same name
Thank you so much. It's really kind of you to work on this problem for me. (it's not so common recently).
I will try your code and see how it works ;) All the best for you and good luck in your programming career!
for me is better if I declare sound variable eg. let trousers = new Audio("./trousers.mp3") and later addEvent listener to a picture. Function playSound {trousers.play();}. it words well but how can I let the program know which condition has to be met to play sound. Because if I add event listener to grid or to img he plays sound for all of the pictures in the grid.
But how to choose these specific pictures? We need to label these picture somehow that if they are clicked sound will be played. Can you give me a hint cause I am quite frustrated with this problem and your first solution only play sound if 2 cards are picked either match or wrong. But what I meant is to play sound when every single card is clicked. And sound should be different depending on different card. For trousers => trousers.mp3 for skirt => skirt mp3, etc.
Good day,
like I said earlier, I am not really familiar with the audio api, so I cannot really tweak your method. So this is what I came up with.
Since everytime a card is clicked, we get the dataset-id and then use this to get the name from the array, you can easily play the sound from there
let clicked =cardArray[selected].name
cardsSelected.push(clicked);
source.src=${clicked}.mp3
audio.load()
audio.play()
I also updated it in the link.
But for your method, you can try
let clicked =cardArray[selected].name
cardsSelected.push(clicked);
let sound =new Audio(./${clicked}.mp3)
function playSound(sound){
sound.play()
}
playSound(sound).
This will be called each time a card is clicked, you can just simply interchange it with the one above. I commented this out in the codepen link.
thank you so much for your reply, I solved that problem, it's working with my own images now after I extracted zip file from Codepen (probably I linked sth wrong myself first ;) Now I'm struggling with another problem. I want to play sound each time we click pair of cards. I'm making a game for my students to learn English.
I don't know how to select the specific card from the array and put it into variable. Query selector won't work, document by ID either, maybe sth similar to this: function playSound() {
let selected = this.dataset.id;
cardsSelected.push(cardArray[selected].name => should I write the name of the card here?); every help much appreciated.
that's the address of my website where I placed it:
english-quiz.cba.pl/Memory%20game/...
Sorry for the late reply,
I have updated my codepen link and added sounds like you said. So if two different images are selected, an error sound, and if they are the same picture, a success sound. I am not really good with the audio api, but I hope that is what you want, tell me if you want any change.
It works like this, when you click on two images and it checks if they are the same or not, it sets the src of the audio source and loads it before playing it. Note that the loading is very important,
Thank you
Hi, thank you so much for your help! it really works! I will include it on my website. It's a little different than what I wanted but also nice. I want to include voice of a lector who will say the correct pronunciation of each card, eg. when they click "trousers" it should say: "trousers, etc. I will think about it. I'm looking for ways to access objects from the array with pictures (cardArray) and make a new variable, eg. var trousers = cardArray[0] and later function: playSound() case: trousers =>"trousers.mp3". Sth like that. I will work on it meantime. Thanks a lot!
Ok I think I have worked on it , the names you will use in each object will be basically the same name has the mp3 like you said.
So what I did was, everytime a card is clicked the name is pushed to an array, I got the name and I appended .mp3 to it and played it.
You can check the link again, but note that mine won't work since I dont have a fries.mp3 :).
And if your music will be in a different folder, you can do this.
source.src=
./music/data/${cardsSelected[1]}.mp3you can use the first or second value since they are basically the same name
Thank you so much. It's really kind of you to work on this problem for me. (it's not so common recently).
I will try your code and see how it works ;) All the best for you and good luck in your programming career!
No problem
I am glad I helped
and thank you
for me is better if I declare sound variable eg. let trousers = new Audio("./trousers.mp3") and later addEvent listener to a picture. Function playSound {trousers.play();}. it words well but how can I let the program know which condition has to be met to play sound. Because if I add event listener to grid or to img he plays sound for all of the pictures in the grid.
But how to choose these specific pictures? We need to label these picture somehow that if they are clicked sound will be played. Can you give me a hint cause I am quite frustrated with this problem and your first solution only play sound if 2 cards are picked either match or wrong. But what I meant is to play sound when every single card is clicked. And sound should be different depending on different card. For trousers => trousers.mp3 for skirt => skirt mp3, etc.
Good day,
like I said earlier, I am not really familiar with the audio api, so I cannot really tweak your method. So this is what I came up with.
Since everytime a card is clicked, we get the dataset-id and then use this to get the name from the array, you can easily play the sound from there
let clicked =cardArray[selected].name
cardsSelected.push(clicked);
source.src=
${clicked}.mp3audio.load()
audio.play()
I also updated it in the link.
But for your method, you can try
let clicked =cardArray[selected].name
cardsSelected.push(clicked);
let sound =new Audio(
./${clicked}.mp3)function playSound(sound){
sound.play()
}
playSound(sound).
This will be called each time a card is clicked, you can just simply interchange it with the one above. I commented this out in the codepen link.
hello bro ;) I did it
check my game out here:
english-quiz.cba.pl/Memory%20game/...
thanks for all your help
Whoa, I love this.
Well done :) :)
hello sir can you please help me i added audio in my game but 'm facing some issue with the audio