js function to play audio only once - how to make it work with one function on 22 questions? | XM Community
Skip to main content

Hello, I have 22 audiofile which has to be listen to only once, each audio is on each own page. Based on 

I have made a js function, which I put in the header of the document. This is how the function looks:

<script>
function playAudio(buttonNum) {
var button = document.getElementById("audiobutton"+buttonNum); //grab button id
var audio = document.getElementById("audiofile"+buttonNum); //grab audio id
audio.play(); //play the audio once
button.style.visibility = "hidden"; //hide the button so that it can't be played anymore
}
</script>

this is how html looks for the audio and button on the first page:
 

<button type="button" id="audiobutton1">Play Audio</button>
<audio src="https://brown.co1.qualtrics.com/CP/File.php?F=F_b71Dx0QXwJXSTj0" id="audiofile1"> </audio>

this is on the second page:

<button type="button" id="audiobutton2">Play Audio</button>
<audio src="https://brown.co1.qualtrics.com/CP/File.php?F=F_b71Dx0QXwJXSadfaef0" id="audiofile2">&nbsp;</audio>

etc.
 

and this is how I call the function in js associated with the above question html

Qualtrics.SurveyEngine.addOnload(function()
{
var buttonNum=1;
jQuery("#audiobutton1").on("click", playAudio(buttonNum));
});

and for the second page it is 
 

Qualtrics.SurveyEngine.addOnload(function()
{
var buttonNum=2;
jQuery("#audiobutton2").on("click", playAudio(buttonNum));
});

 

But what happens is this:
1. Button is already  hidden.
2. Correct Audio stats to play automatically, on itself - but it does it twice, with the slight delay, so voices overlap!

What do I do wrong? 

Thank you.
 

Are you facing these issues in the survey preview, if yes, then the problem is that there are two surveys running together, desktop and mobile view. Publish and view through the link, it shouldn't be a problem. 


@ahmedA you were right, it was in preview! I published, and unfortunately nothing plays there(in preview, it does play, but now I understand why it doubles)- and button is hidden! I am wondering why buttong is hidden? why the function acts not ‘onclick’, as supposed, but right away?


Leave a Reply