We Keep Coding

button click prevents second sound playing

I have a simple Javascript program that plays a sound when correct button is clicked in response to a question.
If the user answers a second question too quickly and clicks a second correct answer the sound doesnt play a second time as first play has not completed.
Do I need to disable the answer buttons for the duration of the sound?
Any other ways roound?
Suggestions please
Scruffy code added 27.9.2022
function setQuestion(){
// string question
var questionText =" x 3 = ";
questionText=aTimes[index]+ questionText;
document.getElementById("Question").innerHTML= questionText;
aAnswers[0]=(aTimes[index]*3);
aAnswers[1]=Math.floor((Math.random() *10) *(aTimes[index] + 1));
aAnswers[2]=Math.floor((Math.random() *10) * (aTimes[index] + 2));
shuffleArray(aAnswers)
document.getElementById("Answer1").innerHTML= aAnswers[0];
document.getElementById("Answer2").innerHTML= aAnswers[1];
document.getElementById("Answer3").innerHTML= aAnswers[2];
}
function answerCheck(poss){
//*****************************************************************
//*** does the button clicked match the correct multiple of 3
//*****************************************************************
if (poss.innerHTML==(aTimes[index]*3) ) {
changePicture();
index=(index+1);
**playAudio();**
resetButtons();
setQuestion() ;
if (index==10){
alert("done");
}
}
else{
alert("not a match");
poss.style.backgroundColor = "grey";
}
}
function resetButtons(){
document.getElementById("Answer1").style.backgroundColor = "#008CBA" ;
document.getElementById("Answer2").style.backgroundColor = "#008CBA";
document.getElementById("Answer3").style.backgroundColor = "#008CBA";
}
**function playAudio()** {
//************** Play a reward sound
var x = document.getElementById("myAudio");
x.play();
}
</script>

The HTML audio element probably isn't a great fit for what you want to do here. I'd recommend using a library like Howler.

Playing different sounds based on user's answer

I would like to play a correct sound tone when user selects correct answer and play an incorrect sound tone when user gets wrong answer. However both audio plays when answer is clicked
var correctSound = document.getElementById('correctSound');
var incorrectSound = document.getElementById('incorrectSound');
function checkAnswer(selectedAnswer) {
var theCorrectAnswer = quizData[currentQuestion - 1].correctAnswer;
// turn the boxes red or green depending on if they are the correct answer
$(".answer-box").each(function(index) {
if ((index + 1) == theCorrectAnswer) {
$(this).addClass("correct");
correctSound.play();
} else {
$(this).addClass("incorrect");
incorrectSound.play();
}
});
if (selectedAnswer == theCorrectAnswer) {
// got it correct
score += 1;
$(".score").html(score);
} else {
// got it wrong so do nothing
}

Javascript / jQuery check which button is currently playing a song

I'm currently trying to make a song selection list where a user can hit a button to preview a song. I'm struggling with the logic behind setting a buttons innerHTML to read 'Stop preview' when that buttons song is playing and also have the buttons HTML change when a user clicks another button.
Currently my script looks something like:
var playedBy;
var song;
var playing = false;
var audioPlayer = document.getElementById("demo");
function setSong(value, idForPlayed) {
song = value;
audioPlayer.src = song;
audioPlayer.play();
playedBy = idForPlayed;
var currentIdPlayingValue = document.getElementById(idForPlayed).value;
console.log(currentIdPlayingValue);
}
function valueGetter(button) {
song = button.value;
button.className += " playing";
var idForPlayed = button.id;
var value = song;
setSong(value, idForPlayed);
}
function doEnd() {
playing = false;
console.log('we have an end');
document.getElementById('demo').pause();
document.getElementById('demo').currentTime = 0;
}
With the value of the buttons being the URL i'm passing the audio object.
Any help is appreciated here, very unsure on the approach i should take.
Thanks all!
Simple example in code pen : http://codepen.io/anon/pen/XXwXYV

You could toggle the innerHtml and all of the other buttons html on click.
Something like
$('.btn').on('click', function(){
//Add or remove a class for the clicked button to determine if it's playing.
$(this).toggleClass('playing');
if($(this).hasClass('playing')){
//Set all buttons back to play
//And probably call some sort of Stop Playing function
$('.btn').html('Play').removeClass('playing');
$(this).html('Stop Playing').addClass('playing');
}else{
$('.btn').html('Play').removeClass('playing');
}
});

Play/Pause Audio Button Using HTML5 And JavaScript

I am facing a problem for a couple of hours. I have some Radio Channels into a HTML document. Every channel has an image (it's logo). I can't figure out how to make the "click to Play/Pause" working.
Here's the JSFiddle document : http://jsfiddle.net/s35vk80m/1/ 123
If you click on the first image, it will play/pause the channel. The second button act like the first one.
How can I make it work, so that both of them would work independently and if I click on the second one while the first one is running, it would stop the first channel and start the second one?
I am sorry, I am a begginer :-).

Based on w3schools html5 audio, m3 and pls audio types are not supported.
Maybe streaming will do (never tried), something like this is-it-possible-to-play-shoutcast-internet-radio-streams-with-html5.

function aud_play_pause() is defined in your code twice. You need to give the second function a different name or just use one function to do both things. I would do something like this:
function aud_play_pause(channel) {
var Radio21 = document.getElementById("Radio21");
var RadioZU = document.getElementById("RadioZU");
if(channel == 'radio21'){
RadioZU.pause();
if (Radio21.paused) {
Radio21.play();
} else {
Radio21.pause();
}
}
if(channel == 'radioZU'){
Radio21.pause();
if (RadioZU.paused) {
RadioZU.play();
} else {
RadioZU.pause();
}
}
}
</script>
Someone more knowledgeable than I could probably provide a more elegant solution but this should work.
Also, I couldn't get your JSFiddle to work in my browser and I couldn't get my JSFiddle to work so I haven't been able to test the function. Firefox didn't like the ContentTypes you are using: "HTTP "Content-Type" of "audio/x-mpegurl" is not supported. Load of media resource http://www.radio21.ro/Radio21Live.m3u failed."
EDIT:
I thought about this a little more and basically you need a toggle. I can't get your example to work in Firefox so I'm going to create a toggle example that doesn't solve your problem but should illustrate how to fix it.
function example(string) {
var first_div = document.getElementById("one");
var second_div = document.getElementById("two");
if(string == 'one'){
second_div.innerHTML = "OFF";
if (first_div.innerHTML == "OFF") {
first_div.innerHTML = "ON";
} else {
first_div.innerHTML = "OFF";
}
}
if(string == 'two'){
first_div.innerHTML = "OFF";
if (second_div.innerHTML == "OFF") {
second_div.innerHTML = "ON";
} else {
second_div.innerHTML = "OFF";
}
}
}
<div id="one" onclick="example('one')">OFF</div>
<div id="two" onclick="example('two')">OFF</div>

How to run function after event is run?

I am a beginner with all coding. Here is my general goal. I am running something relatively simple where I have 8 superheroes on the screen. I would like the user to eliminate the 4 DC superheroes from the screen and after all 4 of them are eliminated from the screen I want the system to alert the user that they have won the game. They don't have to do it in any order so I ran the superHero function each time a DC character was clicked to check if all four DC superheroes had been eliminated yet. Somebody please help me. I feel like it is something very simple I am messing up on. Thanks a ton in advance.
/*This is my jquery that shows all 8 of my superheroes*/
$('#heroes').show();
var flashHidden = !$('#greenlantern').is(':visible');
var greenHidden = !$('#greenlantern').is(':visible');
var batmanHidden = !$('#batman').is(':visible');
var supermanHidden = !$('#superman').is(':visible');
function superHero() {
if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
alert ("Congratulations!!! You have won the game!! Please proceed forward and fill out a quick survey for the developers");
}
}
$('#flash').click(function(){
$('#flash').hide('slow',function(){
superHero();
});
});
$('#greenlantern').click(function(){
$('#greenlantern').hide('slow',function(){
superHero();
});
});
$('#batman').click(function(){
$('#batman').hide('slow',function(){
superHero();
});
});
$('#superman').click(function(){
$('#superman').hide('slow',function(){
superHero();
});
});
});
Right now the current thing that is happening is I will eliminate all of the correct superheroes and it will not alert me that the user has won. I've tried a lot of different things and the only other result I've gotten is to have the system alert the user every time they click on a superhero that they've won which is also incorrect.
EDIT
This has been solved by changing the scope of the variables to inside the function.

You should declare your variables i.e. flashHidden in your function. Currently you are setting then at the start.
function superHero() {
var flashHidden = !$('#flash').is(':visible');
var greenHidden = !$('#greenlantern').is(':visible');
var batmanHidden = !$('#batman').is(':visible');
var supermanHidden = !$('#superman').is(':visible');
if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
alert ("Congratulations!!! You have won the game!! Please proceed forward and fill out a quick survey for the developers");
}
}
Additionally your click handler can be condensed into
$('#flash, #greenlantern, #batman, #superman').click(function(){
$(this).hide('slow',function(){
superHero();
});
});

You're setting...
var flashHidden = !$('#greenlantern').is(':visible');
...to start with. But you're not updating that variable later on when it gets hidden. So according to your check of:
if(flashHidden && batmanHidden && supermanHidden && greenHidden) {
...Flash is still visible. Even though, yes, on the page he's gone.
Try adding this:
$('#flash').click(function(){
$('#flash').hide('slow',function(){
flashHidden=true;
superHero();
});
});