Hi everyone! I'm trying to restrict the number of times (up to 6 times) people can listen to an audio clip within my survey. Additionally, I would like to track the number of times that same audio clip is played (i.e. 1-6 times). I've been browsing the online community for help, but can't seem to get the code to work properly in my survey. This is my first time using Qualtrics, so if anyone could provide any guidance at all, it would be very much appreciated!
Solved
How do you restrict the number of times an audio clip is played?
Best answer by AHammell
asimm123 You have some extra stuff in your HTML that you don't need need. The HTML View for your question should only contain the following:
Remember to listen carefully and make sure that your computer volume is on, as you will only be able to listen to the clip once.
In terms of the JavaScript, you'll want to be sure to add all of the JavaScript code that I included above.
(P.S. To embed code, use 3 " ` " symbols in a row and press "enter" :) )
+11I may have something cooked up, but a couple of questions first:
- Do you need folks to be able to pause the audio?
- Do you need folks to be able to control any other parts of the audio file in any way (e.g. scrubbing and/or volume control)?
AHammell Hi! Thanks for your response! Ideally, participants will be able to click the "play" button on the audio clip; however, they won't be able to press that button again once it's played once. Pausing/other control features wouldn't be necessary :)
+11asimm123 ; Alright, so I just attached a QSF file above, which you can download and import if you would like to see how exactly I implemented the following survey: https://umn.qualtrics.com/jfe/form/SV_bpcbr5HysOKGQfP
There are 3 components to making this work: 1) embedded data fields, 2) corresponding question HTML and 3) corresponding JavaScript.
For #1) Be sure to add two embedded data fields to the very top of your survey flow. In my example, I did "play_count" to help track the number of times the video was played and "pageload_count" to help track the number of times the page was load (this tracks whether or not the page was refreshed). The value of these fields will be modified with the corresponding JavaScript. Have "play_count" be set to "value will be set from Panel or URL." and have "pageload_count" be set to 0. 
For #2) Go into the "HTML" view for your audio question and add the following HTML code:
The only thing you need to change here is the URL between the quotes after "src"-- change it to the URL of whatever audio that you have. (Note: If you're not sure what the URL is, you can upload your audio within Qualtrics "rich content editor" within the question. After you upload the audio, go to the question's "HTML View", and the URL for your audio file should be within the HTML, much like my code above). For #3) Click on gear icon to the left of your audio question, then "Add JavaScript...", which will pop open the JavaScript window. This will be the JavaScript that you will need add to your audio question:
Qualtrics.SurveyEngine.addOnload(function()
{
//create variable to track play count
var playcount = 0;
//create variable to track page refresh count
var refreshcount = 0;
//Get audio element
//name "audiofile1" this whatever you name your audio element ID is within your HTML
var audio = document.getElementById("audiofile1");
audio.volume = 1; //set audio volume to 1
// CREATE playAudio() FUNCTION
function playAudio() {
playcount++; //increase playcount number by 1
console.log(playcount);
var button = document.getElementById("audiobutton"); //grab button id
button.style.visibility = "hidden"; //hide the button so that it can't be played anymore
audio.play(); //play the audio one last time
//update play_count embedded data to current playcount number
Qualtrics.SurveyEngine.setEmbeddedData("play_count", playcount);
};
audio.onended = function() {
if (playcount < 6){
var button = document.getElementById("audiobutton"); //grab button id
button.style.visibility = "visible"; //show button again
}
};
// TRIGGER playAudio() function on button press (note that the HTML element id for the button is called "audiobutton"
jQuery("#audiobutton").on("click", playAudio);
// TRACKING PAGE REFRESH
// NOTE: "playcount" variable refreshs to 0 if a respondent refreshes the page
// WARNING: The three lines below will not work properly if this JavaScript is on the first page of the survey
// Pull number in pageload (default within embedded data element should be set to 0)
var pageload = Qualtrics.SurveyEngine.getEmbeddedData('pageload_count');
pageload = parseInt(pageload)+1;
//save updated reload value to 'refresh_count' embedded data
Qualtrics.SurveyEngine.setEmbeddedData('pageload_count', pageload);
});
I have added comments in the JS code so that you can see what each line does. The JS code does a number of things:
- Tracks the number of times that the respondent plays the video (note, this number resets if the respondent reloads the page); this number will be saved within an embedded data field so that you can export it with the rest of your data
- Tracks the number of times that a respondent loads the page (anything greater than 1 indicates that they reloaded the page: 2 = they reloaded the page once, 3 = they reloaded the page twice, etc.); this number will be saved within an embedded data field so that you can export it with the rest of your data
- Hides the "play audio" button while the audio is playing
- Makes the "play audio" button reappear once the audio is done playing UNLESS the audio has been played 6 times
Again, feel free to download and import the QSF file I attached in the comment above to see how I implemented this survey. If you have any further questions or would like clarification on anything, let me know! :)
AHammell Thank you so much! This was super helpful :) If I have another question where I would like the participant to only be able to listen to the audio clip once, is there a way to modify this code to do that?
+11Absolutely! All you need to do is delete the following code from the JavaScript (i.e. the code that makes the play button reappear):
audio.onended = function() {
if (playcount < 6){
var button = document.getElementById("audiobutton"); //grab button id
button.style.visibility = "visible"; //show button again
}
};
Alternatively, if you would like to change the max play count to any number other than 6, you can just replace the 6 in the JavaScript code chunk above to whatever number you would like the max play count to be.
Example if I wanted the max play count to be 10:
audio.onended = function() {
if (playcount < 10){
var button = document.getElementById("audiobutton"); //grab button id
button.style.visibility = "visible"; //show button again
}
};
AHammell Thanks so much! I put your suggested code into the javascript, but for some reason, the audio clip seems to play on a loop once the "play" button is pressed. Do you have any idea where I could have gone wrong?
+11asimm123 Hm. Can you copy and paste your exact JavaScript and the "HTML View" code into here? That'll help me troubleshoot.
AHammell I'm not quite sure how to embed my JavaScript into the discussion like you did, and for some reason Qualtrics is blocking my copy/paste of my code.
HMTL View:
9. Remember to listen carefully and make sure that your computer volume is on, as you will only be able to listen to the clip once.
src="https://umich.qualtrics.com/CP/File.php?F=F_0uYH2HYrjamicNn" type="audio/mp3">
+11asimm123 You have some extra stuff in your HTML that you don't need need. The HTML View for your question should only contain the following:
Remember to listen carefully and make sure that your computer volume is on, as you will only be able to listen to the clip once.
In terms of the JavaScript, you'll want to be sure to add all of the JavaScript code that I included above.
(P.S. To embed code, use 3 " ` " symbols in a row and press "enter" :) )
Hello AHammell! Thank you very much for this helpful information. I'm wondering how to adjust the script you've provided if each of my questions has TWO audio files in it. Moreover, my audio files are in multiple choice answers, so I'm not sure if there is a way to edit the HTML of those answer choices. Grateful for your assistance!
Morgan
+11asimm123 So sorry I missed this response! Did you get it figured out?
morganpatrick803 To clarify, are you saying that you will have two audio files within the same question, and each are tied to multiple choice response options?
+1Hi AHammell! Thanks so much for providing all this coding!!! Unfortunately the HTML code is not working for me anymore. It used to work when I uploaded my audio files through the "rich content editor", but I don't seem to be able to do that anymore, and inserting an URL from a SoundCloud or Google drive audio file into the
Thanks a lot!
Chiara
+1Hi AHammell, thanks for your reply and apologies for getting back to you so late. In the end I've avoided the issue by using Qualtrics Media Library, so everything looks good on that front.
The codes you've kindly provided in this thread work fine. The only problem is that, although the 'Play' button disappears once the audio has been played the allowed amount of times (in my case, once), one can still re-play the audio by clicking on the empty area where the 'Play' button used to be. In other words, the button is hidden but that doesn't necessarily prevent people from playing the audio. Is this normal, or is it just an issue with the Preview mode?
Is there a way to make sure the playing function is fully disallowed/deactivated after an audio has been played a given amount of times?
Thanks for your help!
+11I would add the following into your JavaScript:
audio.onended = function() {
if (playcount < 6){
var button = document.getElementById("audiobutton"); //grab button id
button.style.visibility = "visible"; //show button again
} else {
button.style.display = "none";
}
};
The additional "else" statement will get rid of the play button when "playcount" is greater than your specified number.
Let me know if that works for you!
+1Hi AHammell, thanks so much for your reply, which I've just seen (clearly I must have missed the notification)!
I've added the new bit of coding but it doesn't seem to make any difference. The audio button disappears when it's supposed to, but this was already the case. The problem is that, even though the button is no longer there, you can still play the audio by clicking on the space where the button used to be.
Do you know if there is a way to work around this? Perhaps by deactivating controls/mouse movements after a given audio has been played a certain number of times?
I have no idea whether this is possible at all but I'm trying to think outside the box :-)
Thanks so much for your help!
Chiara
+11I don't have the time to fully test myself, but here are some things for you to try. Go ahead and try this first:
audio.onended = function() {
var button = document.getElementById("audiobutton"); //grab button id
if (playcount < 6){
button.style.visibility = "visible"; //show button again
} else {
button.style.visibility = "hidden";
button.style.display = "none";
}
};
If that doesn't work, then go ahead and try this instead:
audio.onended = function() {
var button = document.getElementById("audiobutton"); //grab button id
if (playcount < 6){
button.style.visibility = "visible"; //show button again
} else {
button.parentNode.removeChild(button);
}
};
Let me know if either of these works (or doesn't)!
+1Thanks so much! I've just tried both but unfortunately neither of them works. Let me know if you can think of anything else :-)
+11Can you send me the entirety of your JavaScript and HTML? I'm wondering if there's something amiss elsewhere.
+1Sure! Thanks so much! :-)
Qualtrics.SurveyEngine.addOnload(function()
{
//create variable to track play count
var playcount = 0;
//create variable to track page refresh count
var refreshcount = 0;
//Get audio element
//name "audiofile" this whatever you name your audio element ID is within your HTML
var audio = document.getElementById("audiofile1");
audio.volume = 1; //set audio volume to 1
// CREATE playAudio() FUNCTION
function playAudio() {
playcount++; //increase playcount number by 1
console.log(playcount);
var button = document.getElementById("audiobutton1"); //grab button id
button.style.visibility = "hidden"; //hide the button so that it can't be played anymore
audio.play(); //play the audio one last time
//update play_count embedded data to current playcount number
Qualtrics.SurveyEngine.setEmbeddedData("play_count", playcount);
};
audio.onended = function() {
if (playcount < 1){
var button = document.getElementById("audiobutton1"); //grab button id
button.style.visibility = "visible"; //show button again
}
};
// TRIGGER playAudio() function on button press (note that the HTML element id for the button is called "audiobutton"
jQuery("#audiobutton1").on("click", playAudio);
// TRACKING PAGE REFRESH
// NOTE: "playcount" variable refreshs to 0 if a respondent refreshes the page
// WARNING: The three lines below will not work properly if this JavaScript is on the first page of the survey
// Pull number in pageload (default within embedded data element should be set to 0)
var pageload = Qualtrics.SurveyEngine.getEmbeddedData('pageload_count');
pageload = parseInt(pageload)+1;
//save updated reload value to 'refresh_count' embedded data
Qualtrics.SurveyEngine.setEmbeddedData('pageload_count', pageload);
});
">https://qmulhss.eu.qualtrics.com/CP/File.php?F=F_4McKRS9A2h9fDp4">
+1Hi AHammell,
I have used the code you distributed here to play an audio file only once and everything worked out well on individual cases. However, if I line up more than one question containing an audio file, only the first one gets played.
I have built a block composed of 8 questions. Participants should be able to play the audio file once, then they should provide an answer, then they should move on to the page where there is a new question. Ideally, the questions should be randomized.
I thought the way in which the code is written would set the playcount value to 0 every time the script is called, and so I cannot figure out what is going wrong. The first file gets played without any issues. Starting from the second file, the audio is not even allowed to play, but the "Play Audio" button is still visible.
In case this is helpful: I copy pasted the code that you suggested (removing the lines that allow files to be played up to N times) and the code for the HTML view for the audio files.
Thanks a lot for sharing the code!
Giorgia
+11Chiara_A Apologies for the late reply. I looked at your code in Qualtrics, and it is working appropriately for me. See here: https://umn.qualtrics.com/jfe/form/SV_1BJa96GMJRz3ghg
I've attached the QSF file for the linked project so that you can import it yourself and see how it is implemented in this survey.
TestAudio.qsfDo you have any other JavaScript that you're using in your survey that could be interfering?
+11gtroiani Good question! You'll want to update the id name of each of the buttons and audio files that you are using, as well as the JavaScript. So, for example, in the HTML for each question I would put:
For question 1:
For question 2:
THEN, anything in your JavaScript that refers to "audiobutton#" or "audiofile#", you'll want to switch to the appropriate button id and audio id. For example, in some of the JS code, you would switch "audiobutton1" to "audiobutton2" for question2.
ADDITIONALLY, you'll want to modify some of the JS variable and function names so that they are exclusive to each question; this is so that code in one question does not interfere with other questions. So, for example, instead of "function playAudio()", you'll want to call them "function playAudio1()", "function playAudio2()", etc. for each question. And you'll want to call your playcount and audio variables playcount# and audio# instead.
Qualtrics.SurveyEngine.addOnload(function()
{
//create variable to track play count of Question 2
var playcount2 = 0;
//Get audio element
var audio2 = document.getElementById("audiofile2");
audio2.volume = 1; //set audio volume to 1
// CREATE playAudio2() FUNCTION
function playAudio2() {
playcount2++; //increase playcount number by 1
console.log(playcount2);
var button2 = document.getElementById("audiobutton2"); //grab button id
button2.style.visibility = "hidden"; //hide the button so that it can't be played anymore
audio2.play(); //play the audio one last time
//update play_count embedded data to current playcount number
Qualtrics.SurveyEngine.setEmbeddedData("play_count2", playcount2);
};
audio2.onended = function() {
if (playcount2 < 5){
var button2 = document.getElementById("audiobutton2"); //grab button id
button2.style.visibility = "visible"; //show button again
}
};
// TRIGGER playAudio2() function on button press (note that the HTML element id for the button is called "audiobutton"
jQuery("#audiobutton2").on("click", playAudio2);
)};
Note that there's definitely a slicker way to implement the JS for multiple audio files/buttons in a way that doesn't involve this level of modification for the JS code for each question. However, I don't have time to write and test that at the present moment, apologies.
Hoping this will help! Let me know.
+1https://community.qualtrics.com/XMcommunity/discussion/comment/47037#Comment_47037Thanks for the quick reply. I have implemented changed the HTML for each question and the labeling in the JavaScript for "audiofile#" and "audiobutton#" and everything is working perfectly.
It seems that I did not need to change the JS variables' names for it to work. I'll test this out and update the answer here in case I have to modify that as well.
Thanks again for the help AHammell!
Sign up
Already have an account? Login
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join.
No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login with Qualtrics
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join. No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login to the Community
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join.
No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login with Qualtrics
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join. No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.