[FRAGE] Html 5 Player Button

Hallo, ich bin Gunni und neu hier. Ich bräuchte Hilfe bei folgenden Problem.

Ich versuche gerade mit meinen bescheidenen Kenntnissen einen eigenen Audio Player für Icecast Stream zu bauen.

Weil der Player in ein Bild integriert ist, soll er so wenig Platz wie möglich einnehmen.

Es sollen ein Play, Pause, Vol+ und Vol- Button zu sehen sein.

Das hab ich soweit auch hinbekommen und es funktioniert.

Nun scheitere ich an dem Versuch, Play Button durch klick den Stream zu starten und sich dann in den Pause Button zu verwandeln. Somit könnte ich den Platz von einem Button einsparen.

Ich finde Scripts um mit Javascript eine Funktion zu ändern und auch ein Bild zu ändern, aber ich schaffe es nicht beides zusammen zu bringen.

Hinweis: Ich möchte nicht die Standard Buttons verwenden sondern eigene Images für die Player Buttons.



Bisher mit getrennten Buttons sieht mein Code so aus

HTML-Code:

---

<audio id="player" src="http://xxx"></audio>

<div class="bg">

<div id="control">

<div id="play"><button onclick="document.getElementById('player').play()" ><img src="http://ift.tt/1uWQvlN;></button></div>

<div id="plus"><button onclick="document.getElementById('player').volume += 0.1"><img src="http://ift.tt/1xGNV0s;></button></div>

<div id="min"><button onclick="document.getElementById('player').volume -= 0.1"><img src="http://ift.tt/1uWQvlP;></button></div>

<div id="pause"><button onclick="document.getElementById('player').pause() "><img src="http://ift.tt/1xGNX8t;></button></div>

<script>

document.getElementById("player").volume=0.3;

</script>

</div>

---

Könnte mir da jemand bitte helfen?

[FRAGE] Html 5 Player Button