Changed audio iframe to audio html -tag

app/experiment/templates/experiment_statistics.html

@@ -45,13 +45,15 @@
         </button>
 
         <div id="export-link-container" class="hidden">
-          <a id="export-link" class="float-right" href="{{ url_for('experiment.download_csv', exp_id=exp.idexperiment) }}" role="button"></a>
+          <a id="export-link" class="float-right"
+            href="{{ url_for('experiment.download_csv', exp_id=exp.idexperiment) }}" role="button"></a>
           <p id="export-error"></p>
         </div>
 
 
         <div class="progress hidden">
-        <div id="export-results-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+          <div id="export-results-bar" class="progress-bar progress-bar-striped progress-bar-animated"
+            role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
           </div>
         </div>
 
@@ -151,7 +153,10 @@
       {% elif s.type == 'audio' %}
       <td>
         <div class="embed-responsive embed-responsive-16by9 ">
-                  <iframe class="embed-responsive-item thumbnail" src="/{{ s.media }}" allowFullScreen></iframe>
+          <audio class="embed-responsive-item thumbnail" controls>
+            <source src="/{{ s.media }}">
+            Your browser does not support the audio element.
+          </audio>
         </div>
       </td>
       {% else %}
@@ -176,7 +181,8 @@
 
 
 <div class="progress hidden" id="plotted-image">
-  <div id="image-loading-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+  <div id="image-loading-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
+    aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
     <!-- Creating image... -->
   </div>
 </div>

app/task/templates/task.html

@@ -38,7 +38,10 @@
         <div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
             {% for page in pages.items %}
             <div class="embed-responsive embed-responsive-16by9">
-                        <iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe>
+                <audio class="embed-responsive-item" controls>
+                    <source src="/{{ page.media }}">
+                    Your browser does not support the audio element.
+                </audio>
             </div>
             {% endfor %}
         </div>
@@ -49,7 +52,8 @@
         {% if session['type']=='text' %}
         <div class="container text-center mt-5 pt-5">
             {% for page in pages.items %}
-                <h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ randomized_stimulus.text }}</h{{ stimulus_size_text }}>
+            <h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ randomized_stimulus.text }}
+            </h{{ stimulus_size_text }}>
             {% endfor %}
         </div>
         <br><br>
@@ -79,7 +83,10 @@
         <div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
             {% for page in pages.items %}
             <div class="embed-responsive embed-responsive-16by9">
-                        <iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe>
+                <audio class="embed-responsive-item" controls>
+                    <source src="/{{ randomized_stimulus.media }}">
+                    Your browser does not support the audio element.
+                </audio>
             </div>
             {% endfor %}
         </div>
@@ -95,11 +102,15 @@
             </div>
 
             {% for embody_question in embody_questions %}
-                <img id="idembody-{{embody_question.idembody}}" class="embody-image {% if loop.last %}last-embody{% endif %} {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}" src={{ embody_question.picture }} />
+            <img id="idembody-{{embody_question.idembody}}"
+                class="embody-image {% if loop.last %}last-embody{% endif %} {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}"
+                src={{ embody_question.picture }} />
             {% endfor %}
 
             {% for embody_question in embody_questions %}
-                <p id="idquestion-{{ embody_question.idembody }}" class="embody-question {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}"> {{ embody_question.question }}</p>
+            <p id="idquestion-{{ embody_question.idembody }}"
+                class="embody-question {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}">
+                {{ embody_question.question }}</p>
             {% endfor %}
 
             <img id="baseImageMask" class="hidden" src={{ url_for('static', filename='img/dummy_600_mask.png') }} />