Question
Problems with using Javascript to Record Amount of Audio Participant Listens To
Hello,
I am trying to create a survey in which I present an audio file for the participants to listen to. However, I would like to record how much of the total audio the participants actually choose to listen to (how much they choose to skip, etc.). While I am very new to Javascript, a friend helped me write code to record this information in an embedded data field called "totalTime." However, when I tried to enter this code onto the question, the embedded data (placed at the start of the survey) always reports a value of 0 despite the amount of audio is listened to. I am doing something wrong? Thanks for any help!
function roundNumber(number, digits){
var multiple = Math.pow(10, digits);
var rndedNum = Math.round(number * multiple) / multiple;
return rndedNum;
};
// variables to keep track of progress
var audioListened = 0;
var audioSkipped = 0;
var lastPosition = 0;
// initialize data to 0
Qualtrics.SurveyEngine.setEmbeddedData('totalTime', 0);
var audio_element = jQuery("audio.qmedia") // HTML audio element to track
// as the audio plays, we update the data with the total amount of time listened
audio_element.ontimeupdate = function(event) {
audioListened = event.currentTime - audioSkipped;
lastPosition = event.currentTime;
Qualtrics.SurveyEngine.setEmbeddedData('totalTime', roundNumber(audioListened, 2));
console.log(audioListened, audioSkipped);
};
// when participant skips time, we keep track of this to subtract from total time
audio_element.onseeked = function(event) {
audioSkipped += (event.currentTime - lastPosition); // adds fast-forwarding, subtracts rewinding from total
console.log(audioListened, audioSkipped);
};
_**
+27What is the value of audioListened in the console log?
Hi @TomG ,
We added that to test if the code was accurately recording the time listened. However, when testing it out, the console log did not report on this, likely implying some error in the code.
+27> @jak said:
> Hi @TomG ,
> We added that to test if the code was accurately recording the time listened. However, when testing it out, the console log did not report on this, likely implying some error in the code.
If you aren't seeing it in the console log and you don't have any errors in the console, my guess is that the event is never firing. Check to make sure audio_element is correct.
> @TomG said:
> > @jak said:
> > Hi @TomG ,
> > We added that to test if the code was accurately recording the time listened. However, when testing it out, the console log did not report on this, likely implying some error in the code.
>
> If you aren't seeing it in the console log and you don't have any errors in the console, my guess is that the event is never firing. Check to make sure audio_element is correct.
Thanks for the reply. I am quite new to Javascript, so what do I look for to ensure that my audio_element is correct? Thanks!
+27> @jak said:
> Thanks for the reply. I am quite new to Javascript, so what do I look for to ensure that my audio_element is correct? Thanks!
```
var audio_element = jQuery("audio.qmedia") // HTML audio element to track
console.log("audio_element", audio_element);
```
Hi @TomG ,
It seems that you are right that my audio_element is incorrect. Is there a better way to reference the imported audio file?
+27Without seeing your html, my guess is that it most likely doesn't have the class 'qmedia'. Assuming you only have one audio element on the page, this would probably work:
```
var audio_element = jQuery("audio");
```
> @TomG said:
> Without seeing your html, my guess is that it most likely doesn't have the class 'qmedia'. Assuming you only have one audio element on the page, this would probably work:
> ```
> var audio_element = jQuery("audio");
> ```
Hi Tom,
Thanks for your help, I played around with it and now the console log is showing that there is an audio element. However, there is still no action when I use the other console log commands to track the actual amount listened.
Sorry this is taking so long and thank you again for your help!
+27> @jak said:
> Hi Tom,
> Thanks for your help, I played around with it and now the console log is showing that there is an audio element. However, there is still no action when I use the other console log commands to track the actual amount listened.
>
> Sorry this is taking so long and thank you again for your help!
I just realized what your issue is. audio_element is a jQuery object, so your event handler syntaxes are wrong. They should be:
```
audio_element.on("timeupdate", function(event) {
```
and
```
audio_element.on("seeked", function(event) {
```
> @TomG said:
> > @jak said:
> > Hi Tom,
> > Thanks for your help, I played around with it and now the console log is showing that there is an audio element. However, there is still no action when I use the other console log commands to track the actual amount listened.
> >
> > Sorry this is taking so long and thank you again for your help!
> I just realized what your issue is. audio_element is a jQuery object, so your event handler syntaxes are wrong. They should be:
> ```
> audio_element.on("timeupdate", function(event) {
> ```
> and
> ```
> audio_element.on("seeked", function(event) {
> ```
>
Hi Tom, when I try this it says that there is an unexpected identifier. Do you have any thoughts on this?
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.