Auto advance page after playing audio clip with added delay | Experience Community
Skip to main content

Auto advance page after playing audio clip with added delay

  • August 19, 2022
  • 2 replies
  • 212 views
J
Forum|alt.badge.img+1

I would like to present an audio clip (wav format, stored in my personal Files Library on Qualtrics) that plays immediately upon loading the page, and then have the page automatically advance after an additional delay of 500 milliseconds. I have been using the following code, but there are two problems: one is that the audio clip will play multiple times overlapping with itself, and two is that the survey will advance too early. Any help would be appreciated.
Here is the code I'm using, in the addOnReady() portion of the Javascript:
const audio = new Audio("LINK_TO_AUDIO_CLIP");
audio.play();
var delay_length = (audio.duration * 1000) + 500; //duration is given in seconds, convert to ms

setTimeout(function () {
    jQuery("#NextButton").click();
  }, delay_length);

2 replies

bgooldfed
Level 4 ●●●●
Forum|alt.badge.img+25
  • bgooldfed
  • Level 4 ●●●●
  • August 19, 2022

Hi JohnPiaszynski,
Try the ended event:
const audio = new Audio("LINK_TO_AUDIO_CLIP");
var delay = 500;
audio.addEventListener('ended', (event) => {
setTimeout(function () {
jQuery("#NextButton").click();
}, delay);
});

audio.play();
Good luck!

    J
    Forum|alt.badge.img+1

    https://community.qualtrics.com/XMcommunity/discussion/comment/48608#Comment_48608bgooldfed - this worked perfectly. Thank you! For anyone wondering about the issue with the audio files playing multiple times near-simultaneously, this seems to be a bug with the Preview feature of Qualtrics that affects audio files loaded via Javascript but not the HTML. When I published the survey, the clips played correctly. I won't share how many hours it took to figure that out.

    Terms & ConditionsAccessibility statement