====== Audiodateien im Fragebogen ======

**Wichtig:** Lesen Sie vorab die Hinweise unter [[:de:create:media]].

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 ([[https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics#audio_codec_support|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 [[:de:create:frameset]].


===== 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 {{:button.settings.png?nolink|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:

<code html>
<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>
</code>

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. [[https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/audio|SelfHTML: Audio]].

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

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

===== 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.

<code html>
<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>
</code>


===== 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. 

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

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

<code html>
<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>
</code>


===== 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.

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

**Tipp:** Wenn das eingebundene Video nicht korrekt abspielt, dann werfen Sie einen Blick in die [[:de:general:browser-tools#probleme_mit_audio_video|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 [[https://tenacityaudio.org/|Tenacity]].

<code html>
<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>
</code>

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:

  * Das unkomprimierte PCM-Format (WAV-Dateien) wird vom veralteten Internet Explorer (der dennoch häufig genutzt wird) nicht unterstützt ([[https://caniuse.com/?search=wav|Can I Use: WAV]]), vor allem braucht das Format aber sehr viel Speicherplatz. SoSci Survey erlaubt deshalb keine Uploads für WAV-Dateien.
  * Eine verlustfrei komprimierte Alternative zum WAV-Format is FLAC ([[https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs|Mozilla: Audio Codecs]]). Auch hier bleibt der Internet Explorer außen vor und braucht evtl. eine zusätzliche Alternative angeboten -- aber zumindest verschwendet das Format keinen unnötigen Speicherplatz und Bandbreite bei den Befragten.
  * Eine dritte Option sind mp3-Dateien, die mit sehr hoher Qualität (z.B. 320kbps) komprimiert werden. Diese werden von allen Browsern abgespielt und bei hoher Bitrate werden viel weniger Aspekte des Tonsignals entfernt als bei der Standard-Kompression mit 128kbps.

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.

  * Manche Befragte können gar kein Audio-Signal hören, z.B. weil sie sich in einem Großraumbrüo befinden oder weil kein Lautsprecher oder Kopfhörer am Computer angschlossen ist.
  * Andere Befragte können das Audio nur mit relevanten Nebengeräuschen hören, etwa im öffentlichen Nahverkehr. Und selbst zuhause ist oftmals kein ungestörter Hörgenuss gewährleistet: Es sind Familienmitglieder anwesend, der Nachbar mährt den Rasen oder der Paketbote klingelt...
  * Die meisten Befragten werden zuhause nur schlechte Audio-Hardware besitzen, die tiefe Töne nicht wiedergeben kann und auch sonst keinen geraden Frequenzverlauf liefert.
  * Wenn Bluetooth-Kopfhörer zum Einsatz kommen, wird das Signal zwischen Computer und Kopfhörer potenziell nochmal verlustbehaftet komprimiert.