Inhaltsverzeichnis

Audiodateien im Fragebogen

Wichtig: Lesen Sie vorab die Hinweise unter Mediendateien im Fragebogen (Audio, Video, Dokumente).

Es gibt mehrere Dateiformate, die gut für die Verwendung im Internet geeignet sind. Meist wird mp3 das Mittel der Wahl sein, weil die meisten Browser dieses Format problemlos abspielen können (Mozilla: Browser Support).

Hinweis: Die hier vorgestellten Lösungen spielen eine Audiodatei jeweils nur innerhalb einer Fragebogenseite ab. Wie diese Beschränkung umgangen werden kann, beschreibt das Kapitel Musik über mehrere Seiten hinweg abspielen.

mp3 einfach einbinden

Hat man die Audio-Datei im mp3-Format kodiert und auf den Befragungsserver hochgeladen, kann man sie einfach wie einen Textbaustein in den Fragebogen ziehen (Fragebogen zusammenstellen). Mit den Darstellungs-Einstellungen Einstellungen kann man dafür sorgen, dass das Abspielen automatisch startet.

mp3 via HTML5 einbinden

Für die Einbindung legen Sie unter Textbausteine u. Beschriftungen einen neuen Textbaustein mit folgendem Inhalt und Darstellung „HTML-Code“ an: 

<audio id="audio_with_controls" preload="auto" autoplay controls controlsList="nodownload">
  <source src="audio.mp3" type="audio/mpeg" />
  Ihr Browser kann diese Audio-Datei leider nicht abspielen
</audio>

Der/die Dateinamen werden in den <source>-Tags eingetragen, die Optionen controls und autoplay im <audio>-Tag sorgen dafür, dass dem Teilnehmer Bedienelemente angezeigt werden und dass das Abspielen automatisch startet – für weitere Optionen s. SelfHTML: Audio.

Mit CSS-Formatierungen kann man die Größe des Players einstellen. 

<audio id="audio02" controls  controlsList="nodownload" style="width: 200px; height: 80px">
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

Einfacher Abspiel-Knopf

Eine Positionierung außerhalb des sichtbaren Bereichs lässt den Player komplett verschwinden. Sie können das Abspielen dann durch einen eigenen Knopf und ein wenig JavaScript starten. 

<audio id="stimulus" src="audiofile.mp3" style="position: absolute; top: -9999px;">
  <source src="audio.mp3" type="audio/mpeg" />
</audio>
 
<div style="text-align: center;">
    <button id="playButton" type="button">▶</button>
</div>
 
<script>
let button = document.getElementById("playButton");
let audio = document.getElementById("stimulus");
 
button.addEventListener("click", function() {
    // Automatisch zurückspulen (optional)
    audio.currentTime = 0;
    // Abspielen starten
    audio.play();
});
</script>

Audio ohne sichtbaren Player

Mit dem Attribut autoplay kann man den Browser ersuchen, das Abspielen automatisch zu starten.

Hinweis: Die meisten Mobilgeräte (Smartphones, einige Tablets) und teilweise auch die Desktop-Version von Safari blockieren die Autoplay-Funktion, um eine Mediendatei (Audio oder Video) automatisch zu starten. 

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

Für diesen Fall sollten Sie ein JavaScript vorsehen, welches die Bedienelemente nach kurzer Zeit einblendet, wenn die Mediendatei nicht startet. Zum Beispiel: 

<audio id="audio04" preload controlsList="nodownload" autoplay>
  <source src="someAudio.mp3">
</audio>
 
<script type="text/javascript">
<!--
window.addEventListener("load", function() {
  window.setTimeout(function() {
    var audio = document.getElementById("audio04");
    if (audio.paused) {
      audio.setAttribute("controls", "yes");
    }
  }, 500);
});
// -->
</script>

Automatisch Weiter

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. 

<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);
  }, 500);
});
// -->
</script>

Tipp: Wenn das eingebundene Video nicht korrekt abspielt, dann werfen Sie einen Blick in die Fehlerkonsole Ihres Browsers.

Hinweise zu Hörstudien

Nahezu alle aktuellen Browser unterstützen der mp3 Format. Optional können Sie die Audio-Datei zusätzlich im Format ogg hochladen und dem Browser beide Varianten anbieten. Um Audio-Dateien in die komprimierten Formate zu konvertieren, gibt es eine Reihe kostenloser Programme, z.B. den Open Source Audio Editor Tenacity. 

<audio id="audio_with_controls" preload="auto" autoplay controls controlsList="nodownload">
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  Ihr Browser kann diese Audio-Datei leider nicht abspielen
</audio>

Wenn der Audio-Stimulus nicht nur Musik oder Sprache transportieren soll, sondern wenn es um feinste Nuance geht, dann kann die verlustbehaftete mp3-Kompression zum Problem werden. Diese ist zum Beispiel nicht darauf optimiert, das Klopfen eines Spechts zu komprimieren.

Die verlustlose Audiokompression ist im Kontext einer Onlinebefragung aber gar nicht so trivial:

Beachten sie aber, dass es in Online-Befragungen noch weitere Grenzen für die authentische Wiedergabe gibt. Der Arbeitsrechner ist in aller Regel kein Tonstudio.