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