Hi, I plan to design a survey with background music. I added the audio and made it automatically play. However, the audio stops playing when I turn to another survey page. I'd like to know how to make the audio automatically and continuously play across the pages/blocks. Please help. Thanks!
Solved
How to set the audio continously play across the pages/blocks?
+1Best answer by KimothiSaurabh
Lavi Interesting! Each time we hit forward button, page get reloaded so the script that you have placed for audio will also get refreshed.
There are two solutions I can think of:-
Create an embedded variable to store progress of audio clip, update its value when forward button is clicked. Modify audio script to start play from the point which is stored in embedded variable. This way it will feel like audio is playing continuously. However, there could be minor lag while page is being loaded.
Create another survey which will host the Audio script and show actual survey in it as iframe or pop up. This way interaction in actual survey will not impact playing audio.
Lavi Interesting! Each time we hit forward button, page get reloaded so the script that you have placed for audio will also get refreshed.
There are two solutions I can think of:-
Create an embedded variable to store progress of audio clip, update its value when forward button is clicked. Modify audio script to start play from the point which is stored in embedded variable. This way it will feel like audio is playing continuously. However, there could be minor lag while page is being loaded.
Create another survey which will host the Audio script and show actual survey in it as iframe or pop up. This way interaction in actual survey will not impact playing audio.
+1 KimothiSaurabh Thank you so much for your help!!! I tried your second solution, and it worked! Appreciate!
+1KimothiSaurabh I have one more question. As listening to the given music is a very important element in my survey, I don't want my respondents to stop it. Currently, the music has a stop button. I wonder if you have any idea that I can hide the stop button? I'm now using the script below:
I would thank you very much for your help!
Lavi - Just remove the control parameter from that script and player will be hidden. It will look like:-
This should work but if somehow it is not working you can try hiding player using css:
+1KimothiSaurabh Thanks!! The hidden music works. However, the autoplay and hidden play of music only work on the webpage, so as the iframe. When I open the survey on mobile, those functions do not work. Are there any ideas that I can make happen on mobile? Thank you very much.
Lavi On mobile what features are not working? Audio not playing at all or audio is not continuous? Or survey is not loading at all?
+1KimothiSaurabh The autoplay, hidden music, and iframe all do not work on mobile surveys. 
Could you please help? Thanks!
Lavi I guess it could be something related to theme that is being used, perhaps there is something additional in theme for mobile view. Same setup is working at my end on mobile also, it would need further debugging to understand what it stopping it at your end.
Two suggestions I can think of:-
Try published anonymous url for mobile testing instead of preview link(anonymous link of both- host and actual survey)
Place audio file in header section, as shown below:
If you are facing this issue in safari browser, I would suggest to test this out in any other device browser also.
+1KimothiSaurabh I want to thank you very much for your kind suggestions. However, in this study, it's a 2 *2 experimental design, which means that we have two pieces of music that need to play randomly. Therefore, I cannot set place the audio file in the Header. If the audio file really cannot autoplay in a hidden manner, I can only strongly recommend participants to play it.
The most important issue now is that the iframe code doesn't work on the mobile end. I used the published anonymous URL instead of the preview link. Also, I tried chrome and safari, but the iframe survey didn't appear. Please see my iframe code below:
Is there anything wrong with the code? I appreciate you a lot for your help!
https://community.qualtrics.com/XMcommunity/discussion/comment/42672#Comment_42672Lavi Got it, perhaps it is happening due to new compliance requirement, browsers now a days prevents autoplaying audio. There must be some user interaction to play audio in background, kind of acknowledgement. I was trying to create your setup and best way would be to just show your intro first and let then hit start button. Once they hit start button, we will play audio and show actual survey. Something like this:-
If this works with you, please try below:-
In host survey where we have only one text\\Graphic type question, use below html for that question:
Dear participants,
You are invited to complete a questionnaire concerning your expectations and perceptions of Panera Bread at S Allen St. at State College. This questionnaire will take you approximately 5 minutes to complete.
This survey is a part of a marketing project for a college student at Penn State. Your participant is very important and will be highly appreciated! All data will be collected anonymously and only used for research purpose.
In javascript of that question place below code:
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery('#Plug').hide();
jQuery('#Buttons').hide();
jQuery('#mysurvey').hide();
jQuery('#mystartbutton').click( function (event){
jQuery('.Skin #Wrapper').hide();
document.getElementById('myaudio').play();
jQuery('.Skin').append(jQuery('#mysurvey'));
jQuery('#mysurvey').show();
});
});
Test this out in published anonymous links only and make sure in both of your surveys below setting is "off". 
Please review and suggest if this works with you.
+1KimothiSaurabh Thanks for your suggestions! Following your guidance, I finally can make the music automatically and continuously play, and the iframe also works. But, the "start" button appears differently from what you showed to me. My version is like this:
How can I make the "start" button like yours to be placed in the middle and with a grey shade?
Most importantly, this study is an experimental study. So, I have two pieces of music, and I need to randomly play one of them to participants. Do you have any ideas about how to realize it? The URL of the two music is:
https://pennstate.qualtrics.com/CP/File.php?F=F_ahjt0rc2vFSbZ66
https://pennstate.qualtrics.com/CP/File.php?F=F_2n9wzG0qVw3CcHY
Thank you again!
+1KimothiSaurabh Sorry, I think I've solved the "start" button problem. My major problem now is only to randomly play the music. Appreciate your patience and help.
+1KimothiSaurabh I made the randomization happen! Please ignore my above questions, and I'm sorry for the inconvenience. I want to thank you again for your kind suggestions. With your help, the survey now works perfect for me! Appreciate.
+1KimothiSaurabh Sorry I'm new to qualtrics, I'm also facing the problem that if I change the page the audio will stop playing. I want to put my actual survey into a pop-up and this pop-up can be triggered by a button. But I don't know how to make a pop-up, I cannot find a pop-up feature. could you teach me step-by-step? Thank you so much.
Leave a Reply
Rich Text Editor, editor1
Editor toolbars
Press ALT 0 for help
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.