Start timer after an image is clicked (to work around audio auto-play issues) | XM Community
Skip to main content

In my survey participants need to listen to an audio and then answer a question. They shouldn't be able to pause the audio or play it more than once.
Initially I set up autoplay, but it doesn't work on many Apple devices, which block autoplay.
I've found a nice workaround - I hide audio controls, insert an image ("play" button) and some javascript to start playing the audio once the image is clicked.
This works great to prevent pausing but doesn't prevent listening multiple times.
I could set up an auto-advance timer, but what if the participant doesn't click on the image as soon as the page is loaded?
So, my question is - is there a way to start the timer once the image is clicked instead of on page load?
Any other workaround ideas very welcome! Thanks!

Assuming you audio id is 

awesome_track

Qualtrics.SurveyEngine.addOnReady(function () {
    document
    .querySelector("#awesome_track")
    .onended = function () {
        document.querySelector("#NextButton").click();
    };
});

Thanks!
This may be a daft question, but where do I find audio id? It's not the same as URL, right?
I've looked in Qualtrics IDs, but I only see IDs for images, surveys, messages, contact lists, nothing for files.
Also, should I be adding this to the js of the timer question?

Can you share a screenshot of your question HTML or the survey link?

Sorry for the delay in response. For the time being I just added a 30-second silence at the end of all the audio files and set the auto-advance to 30 seconds, so they don't have enough time to replay but have a bit of slack at the beginning in case they don't click on "play" immediately.
I've checked this with multiple users on Apple, Windows, Android phones and laptops - it works well. BUT some participants still can't hear anything or have a significant delay before the file starts playing. Any idea what the problem might be? There is not pattern as to device/browser these participants are using.
Here's the HTML of the question:
image_2021-04-07_210211.pngThe JS on this question:
image_2021-04-07_210756.png
And this is a test survey link:

Thanks a lot for any advice!

Leave a Reply


Terms & Conditions