How do I prevent my audio-player to reload when the page reloads?

Question

I want the audio to only be played once.

I have set my audio-player to be hidden and to play automatically.
Right now the player is not actually hidden and does not play automatically, but it works for me – as the player disappears when you press the play button. Thus the audio only plays once.

However, if the page reloads (e.g. the participant forgets to fill out the question, and the page reloads with a prompt saying the question is needed), the player appears again!

I don't mind the player being visible until you press the play button, but how do I prevent it from reloading?

If this involves JS, I would be very happy if you could add some examples/suggestions.

Or is there a simpler way to only get it to play once?

Thank you

Answer 1

I want the audio to only be played once.

What if a person reloads the page while the audio is playing?

Given that you don't want the audio to play, you can use a Variable to test if the page has already "displayed" the audio before:

if (!isset($audioPlayed)) {
  text('AU01'); // The HTML code for the audio
  $audioPlayed = true;
  registerVariable($audioPlayed);
}

Comments

In the text use a placeholder like this:

    <audio src="%filenname%" id="stimulus">

In the questionnaire just specify the filename. If the text is stored as AU01, write

show('AU01', [
  '%filenname%' => 'audiofile01.mp3'
]);

This can, of course, also be used in a filter.

if (!isset($audio1)) {
    show('AU01', [
        '%filenname%' => 'audiofile01.mp3'
    ]);
    $audio1 = true;
    registerVariable($audio1);
}

You could further reduce the copy & change efforts, when defining a PHP function, but that would increae complexite a bit further.

---

Thank you! Hm, you mean implement the placeholder in the HTML5-code in Text Elements and Labels?

On https://www.soscisurvey.de/help/doku.php/en:create:media#embedding_of_an_mp3_using_html5 it says to paste the following if I want the audioplayer to be hidden:

<audio id="audio03" controls ​controlsList="​nodownload" ​style="​position:​ absolute; left: -9999px; top: -9999px">​
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

Should I implement the placeholder like this?

<audio src="%filenname%" id="stimulus" preload="auto" autoplay controls controlsList="​nodownload" style="​position:​ absolute; left: -9999px; top: -9999px"​>
</audio>

I have two problems when I do this:

1) the player isn't hidden
2) I get an error saying "[line 1] error parsing attribute name"

---

>  in Text Elements and Labels?

Not exactly - I mean a "new text" within a section of your list of questions. I am not 100% sure, if show() will work with a text defined in "Text Elements and Labels".

> Should I implement the placeholder like this?

Yes, but make sure you actually want to hide the player. Because you will need to start it playing one way or another.

Regarding your trouble, it may be useful to post a pretest URL here that leads directly (!) to a page with the audio, so I can take a look. Possibly you wrote the code in Word and the quotations marks have been changed...

---

Here is a pretest URL for the page: https://www.soscisurvey.de/asrba/?act=Y6lPNGXPHSb5zmSdBRIAKOI2

The audio won't play now.

The code is written as a "new text" in my list of questions (with HTML format). The ID is AU01.

---

I have gotten it to work now. Thank you so much for your help!