+1 vote
in SoSci Survey (dt.) by s080771 (210 points)

Gerne hätte ich im Forum nachgefragt, doch finde ich keine Möglichkeit mich dort zu registrieren... Trotz langem Versuchen und diverser online html-Tutorials komme ich leider nicht weiter:

Ich möchte Audiodateien via html einbinden, und zwar so dass kein Standard-Player (also nicht mit Standard-'controls') erscheint sondern lediglich ein Play-Button. Die UmfrageteilnehmerInnen sollen lediglich "start" drücken können, die Tonspur darf weder pausiert noch gespult werden, auch darf die Datei kein zweites Mal angehört werden.

Idealerweise soll der "nächste Seite" Button erste erscheinen wenn die Datei fertig abgespielt ist.

Vielen Dank im Voraus und freundliche Grüße!

1 Answer

+1 vote
by SoSci Survey (304k points)
edited by SoSci Survey
 
Best answer

Diese hübsche Support-Plattform hat letzte Woche das alte Forum abgelöst :)

Der Trick für Ihr Problem liegt darin, den Player gar nicht anzuzeigen. Sie können ihn etwa mit einem style="positon: absolute; left: -10000px" aus dem sichtbaren Bereich hinaus werfen.

Um nun den Play-Button zu bekommen, legen Sie eine entsprechende Grafik auf die Fragebogen-Seite. Geben Sie dem image-Tag eine HTML-ID. Und dann müssen Sie nur noch ein paar Zeilen javaScript schreiben, damit ein Klick auf den Play-Button den Player startet.

<audio style="positon: absolute; left: -10000px" id="audioplayer">
  <source src="example.mp3" type="audio/mpeg">
</audio>
<div style="text-align: center; margin: 2em;">
  <img src="play.png" id="playbutton">
</div>
<script type="text/javascript">
<!--
function playAudio() {
  document.getElementById("audioplayer").play();
}
SoSciTools.attachEvent(
  document.getElementById("playbutton"),
  "click", playAudio
);
// -->
</script>

Und wie ich auf Stack Overflow gerade lese, kann man das -Element sogar durch javaScript ersetzen:

<div style="text-align: center; margin: 2em;">
  <img src="play.png" id="playbutton">
</div>
<script type="text/javascript">
<!--
function playAudio() {
  document.getElementById("audioplayer").play();
}
SoSciTools.attachEvent(
  document.getElementById("playbutton"),
  "click", playAudio
);
// -->
</script>

Wenn der Abspiel-Button nach dem Klick durch eine andere Grafik ersetzt werden soll, könnte man das wie folgt lösen.

<div style="text-align: center; margin: 2em;">
  <img src="play.png" id="playbutton">
</div>
<script type="text/javascript">
var playbutton = document.getElementById("playbutton");
function playAudio() {
  document.getElementById("audioplayer").play();
    playbutton.setAttribute("src", "button2.png");
    SoSciTools.detachEvent(playbutton, "click", playAudio);
}
SoSciTools.attachEvent(playbutton, "click", playAudio);
</script>
by s080771 (210 points)
Herzlichen Dank für die umfangreiche Antwort! Leider komme ich dennoch nicht weiter, irgendwo hängt's... Die Play-button Grafik erscheint, auch der Player ist da (wenn auch nicht sichtbar; wenn ich "autoplay" ergänze läuft die Datei). Nur klappt der click-Befehl nicht, jedenfalls passiert bei click auf das Play-Button nichts, auch nicht in der javascript-Version :(

<audio style="positon: absolute; left: -10000px" id="audioplayer">
  <source src="abstract.mp3" type="audio/mp3">
</audio>
<div style="text-align: center; margin: 2em;">
  <img src="play.JPG" id="playbutton">
</div>
<script type="text/javascript">
<!--
SoSciTools.attachEvent(
  document.getElementById("playbutton"),
  "click",
  document.getElementById("audioplayer").play
);
// -->
</script>
by SoSci Survey (304k points)
Bitte prüfen Sie doch einmal die Fehlerkonsole Ihres Browsers, vgl. https://www.soscisurvey.de/help/doku.php/de:create:javascript#fehler_finden - wenn Sie die Meldungen dort posten, sollte eine Antwort leichter fallen.

Auch ein Pretest-Link direkt (!) zur betroffenen Seite wäre hilfreich, dann können wir und das Problem direkt ansehen.
by s080771 (210 points)
Danke für die Anleitung, da ich sonst mit Programmieren nichts am Hut habe bin ich aufgeschmissen! Als Fehlermeldung kommt im "Inspektor":

TypeError: 'play' called on an object that does not implement interface HTMLMediaElement.

Hier der Link zur Pretest-Seite: https://www.soscisurvey.de/hs_en/?act=uQrocvh3ZzkYCXAry7xl7qFl

Ganz herzlichen Dank!
by SoSci Survey (304k points)
Danke, das hat die Problemsuche deutlich vereinfacht. Offenbar mag es der Browser nicht, wenn man die play-Funktion direkt im Event-Handler anspricht. Ich habe den JavaScript-Code in meiner Antwort ein wenig angepasst (den play()-Aufruf in eine eigene Funktion ausgelagert), nun funktioniert es.
by s080771 (210 points)
Ganz herzlichen Dank, jetzt klappt es! Eine Bitte hätte ich nocht, und zwar ging es ja hauptsächlich darum dass Teilnehmer die Datei lediglich 1x hören dürfen. Kann man den code noch so erweitern dass der Play-Button lediglich einmal funktioniert bzw. nach dem Klicken verschwindet?
by SoSci Survey (304k points)
Ich habe oben noch ein entsprechendes Beispiel ergänzt.
by s080771 (210 points)
Vielen Dank. Es ist zwar immer noch möglich durch erneutes Klicken die Datei wieder und wieder zu starten, aber damit kann ich leben! Ganz herzlichen Dank für den klasse Support hier.
by SoSci Survey (304k points)
Oh ja ... stimmt. Entfernen Sie noch den Event-Handler mittels `SoSciTools.detachEvent`, um das zu verhindern.
by s080771 (210 points)
Herzlichen Dank!

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...