Individuellen Audioplayer einbauen mit Javascript

Hallo,

ich würde gern in ZP 13 den Standard Html5-Player mit einem individuellen Player ersetzen.

Dazu habe ich, wie hier im Forum beschrieben, im <head> über das Attribut additional_meta folgenden Code eingefügt:

<title>HTML5 Audio</title>
<script type="text/javascript">
function abspielen()
{
document.getElementById("player").play();
document.getElementById("pausebutton").style.display = "";
document.getElementById("playbutton").style.display = "none";
}

function pausieren()
{
document.getElementById("player").pause();
document.getElementById("playbutton").style.display = "";
document.getElementById("pausebutton").style.display = "none";
}

function anfang()
{
document.getElementById("player").currentTime = 0;
}

</script>

UND

an die Stelle, wo der Player hin soll, habe ich folgenden Code gesetzt:

<audio controls id="player">
<source src="oid://file/2016_sprecher_minutenmix_tobiasmoeck.mp3" type="audio/mpeg">
<source src="oid://file/2016_sprecher_minutenmix_tobiasmoeck.ogg" type="audio/ogg">
</audio>
<img src="play.png" onclick="abspielen()" id="playbutton"/>
<img src="pause.png" onclick="pausieren()"id="pausebutton" style="display: none"/>

Es scheint nicht nicht zu funktionieren. Wo liegt mein Fehler?

Danke für eine Antwort.

p. s.: Ich bin Voll-Laie und bitte um eine einfache Antwort. Beispielsweise dieser Player soll ersetzt werden: http://www.stimmton.com/sprecher_tobias_moeck_produkte.html

Unter der Überschrift.

Keine Ahnung, was ein XY-Problem ist.

Ganz einfach: Weil es geil aussehen soll.

Habe den Code mit TextEdit auf dem Mac ausprobiert und mit Hilfe dieses Internets. Es hat funktioniert. Nun bleibt die Frage: Wie funktioniert es in ZP? Wie kann ich die Bilder für den individuellen Player korrekt anwählen? Ist das Audio korrekt angewählt? Wie binde ich Javascript korrekt ein?

Vielen Dank für jedwede Hilfe.

Grüße, tobias