Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:media [21.05.2019 14:29] – admin
+++ de:create:media [01.06.2019 20:36] – [mp3 via HTML5 einbinden] admin
@@ Zeile 88: / Zeile 88: @@
 window.addEventListener("load", function() {
   window.setTimeout(function() {
-  var audio = document.getElementById("audio04");
+    var audio = document.getElementById("audio04");
     if (audio.paused) {
       audio.setAttribute("controls", "yes");
@@ Zeile 97: / Zeile 97: @@
 </script>
 </code>
+Ebenfalls mittels JavaScript kann man die Steuerung der Audio-Datei auch noch weiter verfeinern. So kann man über das JavaScript-Ereignis (Event) ''ended'' etwa nach dem Abspielen der Audiodatei automatisch zur nächste Seite weiterleiten.
+<code html>
+<audio id="audio05" preload controlsList="nodownload" autoplay>
+  <source src="someAudio.mp3">
+</audio>
+<script type="text/javascript">
+<!--
+window.addEventListener("load", function() {
+  window.setTimeout(function() {
+    // Audio-Element anhand der ID identifizieren
+    var audio = document.getElementById("audio05");
+    // Kontrollelemente einblenden, falls das Video nicht automatisch anläuft
+    if (audio.paused) {
+      audio.setAttribute("controls", "yes");
+    }
+    // Nach dem Abspielen automatisch weiter zur nächsten Seite
+    audio.addEventListener("ended", SoSciTools.submitPage);
+  }, 250);
+});
+// -->
+</script>
+</code>